VueJs 2 方式数据绑定更改丢失答案

【问题标题】：VueJs 2 way data binding changes lostVueJs 2 方式数据绑定更改丢失
【发布时间】：2016-03-14 18:26:19
【问题描述】：

我有一个产品列表：

他们可以为每个产品选择时间类型（每小时、每天等）。当他们这样做并点击书时，它会将产品添加到购物车；

这是在 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 值它做得很好。然后似乎发生了某种刷新，页面上的所有字段都重置为之前的状态，并且没有更新任何值。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

将输入的类型更改为按钮而不是提交

<input class="btn btn-warning" type="button" value="add to cart">

【讨论】：

感谢您的想法，但没有任何区别
您是否使用了 v-click 并从按钮触发而不是提交？
@dannielum 使用提交事件更好，因为它是在表单中使用enter 触发的
@dannielum - 是的，我就是这么做的

【解决方案2】：

好的，就我而言，问题在于我使用 Laravel 使用 Laravel Collective's package 输出选择框，并且每次这样做时，它都会生成带有选定选项的标记。这是重置下拉菜单。

似乎有更好的方法来使用 VueJs 和后端，比如从服务器获取数据或 html 并将其传递给 VueJs 以生成下拉列表（如果下拉列表是动态的）。我将遵循similar to this的方法。

【讨论】：