我是使用vue.js的新手,我创建了一个非常简单的应用程序来尝试其工作方式。
问题立即发生,当我运行应用程序时,将在无限循环中触发变量的手表。我不知道为什么。有一个v-for循环,但在一个只有两个元素的数组上。
最初的小计应该为0。但是,即使我还没有单击"买入"按钮,但该应用程序触发了买入方法,该子总数最终为442.3799999999999965。
。感谢您的任何帮助。
这是JSFIDDLE啤酒购物车
html:
<div id = "growler">
<table>
<tr>
<th style='width:150px'>Beer</th>
<th style='width:50px'>Price</th>
<th style='width:30px'></th>
</tr>
<tr v-for = "beer in beers">
<td>{{ beer.name }}</td>
<td>{{ beer.price }}</td>
<td>
<button :click="buy(beer)">buy</button>
</td>
</tr>
<tr>
<td>SubTotal</td>
<td>{{subTotal}}</td>
<td></td>
</tr>
</table>
</div>
JS:
new Vue({
el: "#growler",
data: {
beers: [
{name: 'Ahool Ale', price: 2.00},
{name: 'Agogwe Ale', price: 2.38}
],
shoppingCart: [],
subTotal: 0.00
},
watch: {
shoppingCart: function() {
console.log('shopping cart watch triggered');
this.updateSubTotal();
}
},
methods: {
updateSubTotal: function () {
var s=this.shoppingCart.length;
var t=0;
for (var i=0;i<s; i++){
t += this.shoppingCart[i].price;
}
this.subTotal = t;
},
buy: function (beer) {
console.log('beer pushed on array');
this.shoppingCart.push(beer);
}
},
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
},
beforeMount: function() {
console.log('beforeMount');
},
mounted: function() {
console.log('mounted');
},
beforeUpdate: function() {
console.log('beforeUpdate');
},
updated: function() {
console.log('updated');
},
beforeDestroy: function() {
console.log('beforeDestroy');
},
destroyed: function() {
console.log('afterDestroy');
}
});
我发现你的错误:
<button :click="buy(beer)">buy</button>
您在单击处理程序上使用了:
(v-bind
(,而不是@
(v-on:
(。
首次绑定它时,该功能将被调用一次并更新shoppingCart
。这将更新subTotal
数据,该数据将迫使DOM的重新渲染,该数据将由于:bind
而再次触发buy
功能。
修复:
<button @click="buy(beer)">buy</button>
<!-- or -->
<button v-on:click="buy(beer)">buy</button>
建议您的代码更改:
使用计算属性而不是一种方法来更新表示其他值之和的属性:
new Vue({
el: "#growler",
data: {
beers: [{
name: 'Ahool Ale',
price: 2.00
},
{
name: 'Agogwe Ale',
price: 2.38
}
],
shoppingCart: []
},
watch: {
shoppingCart: function() {
console.log('shopping cart watch triggered');
}
},
computed: {
subTotal: function() {
return this.shoppingCart.reduce(function(total, beer) {
return total + beer.price;
}, 0);
}
}
},
methods: {
buy: function(beer) {
this.shoppingCart.push(beer);
}
},
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="growler">
<button>buy</button>
<table>
<tr>
<th style='width:150px'>Beer</th>
<th style='width:50px'>Price</th>
<th style='width:30px'></th>
</tr>
<tr v-for="beer in beers">
<td>{{ beer.name }}</td>
<td>{{ beer.price }}</td>
<td>
<button @click="buy(beer)">buy</button>
</td>
</tr>
<tr>
<td>SubTotal</td>
<td>{{subTotal}}</td>
<td></td>
</tr>
</table>
</div>