Laravel VUE JS 将选择数据绑定到另一个元素答案

【问题标题】：Laravel VUE JS binding select data to another elementLaravel VUE JS 将选择数据绑定到另一个元素
【发布时间】：2019-11-18 13:56:44
【问题描述】：

我试图根据下拉菜单中选择的产品显示产品的产品数量，但是我不知道如何从列表中具体获取数量。

这里是选择菜单：

<select class="form-control" v-model="form.product_list">
  <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>

当您从选择菜单中选择产品时，它会将其绑定到 form.product_list，之后我尝试在此处显示产品数量而不是 product_id：这确实有效，但它显示的是 product_id产品数量。

<td class="text-xs-left">
  <p>{{form.product_list}}</p>
</td>`

这是数据：

data () {
  return {
    products: {},
    form: new Form({
      product_list: '',
    })
  }
}

我知道在 select 元素中将 :value="product.product_id" 更改为 :value="product.product_quantity" 可以解决问题，但是当我稍后将 product_id 插入数据库时，我仍然需要它。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

将其值从 product.product_id 更改为 product.product_qty。希望它会起作用


<option v-for="product in products" :key="product.product_id" :value="product.product_qty">{{product.product_name}}</option>

【讨论】：

我不能这样做，因为我需要 product.product_id 稍后将其插入数据库。
然后创建一个 onClick 事件，每当有人点击该产品时，onClick 事件将触发一个将 product_qty 值分配给数据变量的方法。并将该数据变量（包含 qty ）返回到您的视图模板。