[Vuejs]-Get totalsum from @onclick in vue

by

0👍

✅

You need to define your total property in your data first.
Then just pass the price as argument of your addToCart function.

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/vue@2.6.10/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>

Leave a comment