我有一个产品列表:
对于每种产品，他们可以选择时间类型(每小时、每天等)。 当他们完成此操作并单击“预订”后，会将产品添加到购物车；
这是在 addToCart 下面的粗体行中完成的。
addToCart: function (resultId, cartId) {
var that = this;
this.shoppingCart.forEach(function (cartItem, cartIndex) {
cartItem.added = false;
if (cartIndex == cartId)
{
cartItem.added = true;
that.results.forEach(function (resultItem, resultIndex) {
if (resultItem.id == resultId) {
that.shoppingCart.$set(cartIndex,
{
productTimeType: cartItem.productTimeType,
quantity : cartItem.quantity
});
var numberOfBookings = (parseInt(resultItem.numberBookings, 10) + cartItem.quantity);
that.results.$set(resultIndex, {
numberBookings: numberOfBookings,
name: resultItem.name,
quantity: resultItem.quantity,
id: resultItem.id,
category_id: resultItem.category_id,
description: resultItem.description,
image: resultItem.image,
created_at: resultItem.created_at,
updated_at: resultItem.updated_at
});
HTML:
<tr v-for="result in results">
<td>
<form class="form-inline" @submit.prevent='addToCart(result.id, $index)'>
<input v-model="shoppingCart[$index].quantity" class="form-control" placeholder="Quantity" name="quantity" type="text">
<select v-model="shoppingCart[$index].productTimeType" class="form-control input-lg"><option value="" selected="selected">All types</option><option value="1">Whole day</option><option value="2">Half day</option><option value="3">Per hour</option></select>
<input class="btn btn-warning" type="submit" value="add to cart">
</form>
当我调试它时，console.log 的值它做得很完美。然后似乎发生了某种刷新，页面上的所有字段都重置为之前的状态，并且没有更新任何值。
最佳答案
将输入类型更改为按钮而不是提交
<input class="btn btn-warning" type="button" value="add to cart">
关于javascript - VueJs 2方式数据绑定(bind)更改丢失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35995200/