VueJs 和 Laravel - 多个选择字段

Question

使用 Laravel 5.4 和 Vuejs 2.1

在代码中，我在 tr（表格行）中有一个带有两个输入字段（数量和库存）的选择字段。可以根据需要动态添加带有字段的表格行，代码如下：

<tbody id="loads-content">
  <tr v-for="(item, index) in items">
     <td>
         <select v-model="item.load_id" name="load_id[]" class="loads" v-on:change="getLoadStock()">
             <option v-for="load in loads" :value="load.id" :id="load.id">{{load.name}}</option>
         </select>
     </td>
     <td><input type="text" v-model="item.quantity" name="quantity[]" class="input is-hovered qty"></td>
     <td><input type="text" v-model="item.stock" class="input is-hovered stock" disabled readonly="true"></td>
     <td>
         <button type="button" class="button is-danger remove" @click="items.splice(index, 1)"><i class="fa fa-minus-square-o" aria-hidden="true"></i></button>
     </td>
     </tr>
     <a @click="addLine" class="button is-success"><i class="fa fa-plus-square-o" aria-hidden="true"></i></a>
</tbody>

当您从选择字段中选择一些值时，我需要使用数据库中的股票数据填充 STOCK 输入字段。为此，我使用了 API 调用。我做了这样的事情：

methods: {
        addLine() {
            this.items.push({
                load_id: '',
                quantity: '',
                stock: ''
            })
        },

        getLoadStock(){
            var loadsContent = $('#loads-content');
            var tr = loadsContent.parent().parent();
            var id = tr.find('.loads').val();

            axios.get('/api/load/' + id)
                    .then(function(response) {
                        tr.find('.stock').val(response.data.stock);
                    })
                    .catch(function(error) {
                        console.log(error)
                    });

        },

此代码未按预期工作。

目标是获取当前所选负载的实际库存，查看您可以在数量输入字段中输入多少数量。

我愿意接受任何建议，如果有人有更好的方法和解决方案，请提供帮助。

提前致谢！ :)

Answer 1

您正在混合使用两种不同且不兼容的方式来构建 Web 应用程序：Vue.js 和 jQuery。

使用 Vue 时，您不应该直接操作 DOM。相反，您应该将 DOM 元素绑定到 Vue 模型属性。然后，如果您需要一个 DOM 元素来反映更改，您需要更改模型，而不是 DOM。

例如，你会想要这样的东西（注意将索引作为参数添加到 getLoadStock）：

     <select v-model="item.load_id" name="load_id[]" class="loads" v-on:change="getLoadStock(index)">
         <option v-for="load in loads" :value="load.id" :id="load.id">{{load.name}}</option>
     </select>

和

    getLoadStock(index){
        axios.get('/api/load/' + this.items[index].load_id)
                .then(function(response) {
                    this.items[index].stock = response.data.stock;
                })
                .catch(function(error) {
                    console.log(error)
                });

    },