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

问题描述

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

这是选择菜单:

<option disabled value="">选择产品</option><option v-for="product in products" :key="product.product_id" :value="product.product_id">{{product.product_name}}</option></选择>

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

<p>{{form.product_list}}</p></td>`

数据如下:

data(){返回 {产品: {}，表格:新表格({产品列表: ''，})}}

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

解决方案

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

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

I'm trying to show the product quantity of a product depending on the product that was selected in the dropdown menu, however I can't figure out how to specifically get quantity from the lists.

Here is the select menu:

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

When you select a product from the select menu it binds it to form.product_list, after that I'm trying to show the product quantity instead of the product_id here: This does work however it shows the product_id instead of product quantity.

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

Here's the data:

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

I'm aware that changing :value="product.product_id" to :value="product.product_quantity" inside the select element will solve the issue, however I'm still going to need the product_id when I insert it into the database later on.

解决方案

Change its value from product.product_id to product.product_qty. It will work hopefully

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

这篇关于Laravel VUE JS 将选择数据绑定到另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！