从@onclick中获取总计

Question

当我点击@addToChart按钮并从vue数组获得游戏价格时，我想进行{{total}}更新。

HTML：

<p> Total Price: {{ total }} USD</p>
<button @click="addToChart" :disabled="!game.inStock"
                        :class="{ disabledButton: !game.inStock }">
                        Add to Chart
                    </button>

查看：

el: "#app",
    data: {
        title: "",
        about: "",
        games: [{
                id: 0,
                title: "",
                inStock: true,
                price: 59,



            },
            {
                id: 1,
                title: "",
                inStock: true,
                price: 40,

            },
methods: {
        addToChart: function () {
            this.cart += 1;
            return total;
       }

Answer 1

您需要先在数据中定义total属性。 然后只是将价格作为你的addToCart函数的参数。

new Vue({
  el: "#app",
  data: {
    title: "",
    about: "",
    games: [
      { id: 0, title: "Game 1", inStock: true, price: 59 },
      { id: 1, title: "Game 2", inStock: true, price: 40 }
    ],
    total: 0
  },
  methods: {
    addToChart: function (price) {
      this.total += price
    }
  }
 })

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <p> Total Price: {{ total }} USD</p>
  <div v-for="game in games">
    {{ game.title }}
    <button @click="addToChart(game.price)" :disabled="!game.inStock">Add to Chart</button>
  </div>
</div>