Question

我有一个产品清单：

对于每种产品，他们可以选择时间类型（每小时，每天等）。当他们这样做并点击了书籍时，它会将产品添加到购物车中;

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

Answer 1

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

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

Answer 2

好吧，在我的情况下，问题在于我使用Laravel Collective's package输出Laravel的选择框，每次执行此操作时，都会生成带有选定某个选项的标记。这正在重置下拉列表。

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

VueJs 2路数据绑定更改丢失

2 个答案: