如何确定我的价格以在 vue 的 java 中显示在"Pris:"上？

Question

<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 中有价格。如果你需要的话，你可以在代码中得到我的赞美。我现在在vue方面很糟糕，Java也是我的弱点。

Answer 1

为了显示总价，您可能会发现计算属性非常有用：在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://v2.vuejs.org/v2/guide/syntax.html#v-on-Shorthand）