如何修复我的价格在vue中的java中的“Pris：”上显示？

Posted 2021-03-30

<script>
    // @ is an alias to /src

    export default {
        name: 'home',
        data() {
          return {
            inc: 0,
            inc2: 0,
            inc3: 0,
          }
        },

        methods: {
        toInc() {
          this.inc++
        },
        toDec() {
          this.inc--
        },
        toInc2() {
          this.inc2++
        },
        toDec2() {
          this.inc2--
        },
        toInc3() {
          this.inc3++
        },
        toDec3() {
          this.inc3--
        }
      }
      computed:{ //here i get this error with ";"
      total(){
      return this.inc+this.inc2+this.inc3;
   }
  }
}
</script>

<div class="plane">
        <div class="columns">
          <ul class="price">
            <div class="prisinfo">
              <p class="item">Ordinarie (<span class="cost">85kr</span>/st)</p> //those prices i need to get when im pressing on +
            <div class="priser">
            <li class="pris1"><a href="#" class="button" @click="toDec()">-</a></li>
            <p>{{inc}}</p>
            <li class="pris1"><a href="#" class="button" @click="toInc()">+</a></li>
          </div>
        </div>
        <div class="prisinfo">
        <p class="item">Barn (<span class="cost">65kr</span>/st)</p> //those prices i need to get when im pressing on +
          <div class="priser">
            <li class="pris2"><a href="#" class="button" @click="toDec2()">-</a></li>
            <p>{{inc2}}</p>
            <li class="pris2"><a href="#" class="button" @click="toInc2()">+</a></li>
          </div>
        </div>
        <div class="prisinfo">
          <p class="item">Pensionär (<span class="cost">75kr</span>/st) </p> //those prices i need to get when im pressing on +

          <div class="priser">
            <li class="pris3"><a href="#" class="button" @click="toDec3()">-</a></li>
            <p>{{inc3}}</p>
            <li class="pris3"><a href="#" class="button" @click="toInc3()">+</a></li>
          </div>
        </div>
        </ul>
        </div>
        <section id="totalprice">
        <p>Pris:<span class="total_price">{{total}}</span></p> // and here my total price after getting all the prices togheter after choosing how many tickets you need.
        </section>

我在控制台出错“意外”;在我做了那些改变后，我的dosnt再次工作了。当我按下时，我还需要按下+和替代时加价 - 我有html的价格。如果你需要，你可以在代码中找到我的代码。我现在很沮丧，java也是我的弱点。

答案

要显示总价，您可能会发现computed property非常有用：在您的data属性之后，添加：

computed:{
   total(){
      return this.inc+this.inc2+this.inc3;
   }
},

你的HTML行将是：

<p>Pris:<span class="total_price">{{total}}</span></p>

现在，关于+和 - 按钮：它们看起来很好，我认为它只是HTML方面的一个小错误：你应该用toInc调用函数()。像这样：

<li class="pris3"><a href="#" class="button" @click="toInc3()">+</a></li>

（@click就像v-on:click https://vuejs.org/v2/guide/syntax.html#v-on-Shorthand）