vue中@onclick获取totalsum
Get totalsum from @onclick in vue
我想在单击@addToChart 按钮并从 vue 数组获取游戏价格时进行 {{total}} 更新。
HTML:
<p> Total Price: {{ total }} USD</p>
<button @click="addToChart" :disabled="!game.inStock"
:class="{ disabledButton: !game.inStock }">
Add to Chart
</button>
Vue:
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;
}
您需要先在数据中定义 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/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>
我想在单击@addToChart 按钮并从 vue 数组获取游戏价格时进行 {{total}} 更新。
HTML:
<p> Total Price: {{ total }} USD</p>
<button @click="addToChart" :disabled="!game.inStock"
:class="{ disabledButton: !game.inStock }">
Add to Chart
</button>
Vue:
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;
}
您需要先在数据中定义 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/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>