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)
                });

    },

VueJs和Laravel - 多个选择字段

1 个答案: