0

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

<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
        }
    },

提前致谢。

4

1 回答 1

0

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

在模板的选择选项中

   <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>
于 2019-11-17T06:24:20.203 回答