Laravel 数据取决于选定的下拉菜单

Question

一个小时以来，我一直在尝试根据从下拉菜单中选择的产品动态更改输入字段的值，但我似乎无法弄清楚如何。 这就是我填充产品的方式：

<select name="product_id" v-model="form.product_id" id="product_id" class="form-control" :class="{'is-invalid': form.errors.has('product_id') }">
       <option v-for="product in products" :value="product.product_id">{{product.product_name}}</option>
</select>

这就是我打算根据从下拉列表中选择的产品放置其产品数量的方式。

       <td><input name="product_qty" value="" class="form-control" disabled></input></td>

我正在考虑创建一个名为 getQty() 的方法，然后像 @change="getQty" 这样在输入标签中调用它，但是我似乎无法弄清楚，因为我还是个初学者vue.js

编辑： 这里导出数据：

export default {

    data () {

        return {

            orders: {},
            suppliers: {},
            products: {},
            form: new Form({
                recipient: '',
                supplier_id: '',
                order_type: '',
                to_address: '',
                s_address: '',
                status: '',
                product_name: ''
            }),
            selected: this.products.length ? this.products[0] : null
        }
    },

提前致谢。

Answer 1

试试这个，希望它能满足你的要求

在模板的选择选项中

   <select @click="selectProduct(product)"  class="custom-select" v-model="form.product_id">
        <option disabled value="">Select Product</option>
        <option v-for="product in products" :key="product.product_id" :value="product.product_id">{{product.product_name}} </option>
   </select>

导出默认：

 data() {
        return {
            selected: this.products ? this.products[0] : null
        };
    },
    methods: {
       selectProduct(product) {
            this.selected = product;
            this.$emit('selected', product);
            }
    },

在您的模板上：假设您在 product.product_qty 中的数量。根据您的要求更改此设置

  <td><input :class="{ 'selected': product == selected }" name="product_qty" value="" class="form-control" disabled>{{ product.product_qty }}</input></td>