如何通过方法 assign/pass 动态创建的行中的数据 - Vue.js

Question

如何更新在 table 中动态创建的行中的字段。我正在将数据传递给 v-select 并且我想使用与用户 selected.

相同的数据

我想要达到的目标

我正在尝试搜索产品。我正在使用 [v-select][1] 来获取产品。获取产品后，我将尝试使用产品值更新行。

例如：在第 1 行，如果我 select product-sku ，我想将相应的价格分配给 item.price 然而在第 2 行，如果我 select product-sku1 ，我想将相应的价格分配给 item.price

我正在动态创建行。

虽然我能够获取单个产品结果。我无法将其更新为行。

Vue.component('v-select', VueSelect.VueSelect);
new Vue({
  el: "#app",
  data(){
  return{
   productNameSearch: [{'id':2,'sku':'product-sku','product_name':'Indigo Bullet','product_attributes':{'id':10,'product_id':2,'original_price':1014.8,'product_mrp':'1014.8','sale_price':1249,}},{'id':2,'sku':'product-sku1','product_name':'Bullet','product_attributes':{'id':10,'product_id':2,'original_price':1014.8,'product_mrp':'1014.8','sale_price':1249,}}],
   
  items: [
        {
          sno: "",
          selectedProduct: "",
          particulars: "",
          price: "",
          quantity: "",
          rowamount: "",
        },
      ],}
 
   
  },
  methods: {
    changedLabel(event) {
     console.log(event);
      // this.items = event
    //   this.items.price = event.product_attributes.sale_price;
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">


<div id="app">
  <table class="table table-centered mb-0 rounded" style="width: 100%" aria-describedby="mydesc">
    <thead class="thead-light">
      <tr>
        <th scope="col" class="border-0" style="width: 10% !important">S No.</th>
        <th scope="col" class="border-0" style="width: 70% !important">
          Products
        </th>
        <th scope="col" class="border-0" style="width: 70% !important">
          Particulars
        </th>
        <th scope="col" class="border-0" style="width: 10% !important">price</th>
        <th scope="col" class="border-0" style="width: 10% !important">quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in items" key="item.id">

        <td class="border-0" style="width: 10% !important">
          {{index+1}}
        </td>

        <td class="border-0 fw-bold" style="width: 70% !important">
          <v-select @input="changedLabel" class="form-select style-chooser" label="sku" v-model="item.selectedProduct" :options="productNameSearch" placeholder="Search"></v-select>
        </td>

        <td class="border-0 text-danger" style="width: 70% !important">
          <input v-model="item.particulars" type="text" class="form-control" />
        </td>
        <td class="border-0 fw-bold" style="width: 10% !important">
          <input v-model="item.price" type="text" class="form-control" :placeholder="item.price" />
        </td>
        <td class="border-0" style="width: 10% !important">
          <input v-model="item.quantity" type="text" class="form-control" />
        </td>
        <td class="border-0 fw-bold" style="width: 100% !important">
        </td>

      </tr>
    </tbody>
  </table>
</div>

Answer 1

必须通过 v-for 循环文档中的 Vue Select。

在我的例子中，我无法确定事件是发送到哪个实例，

使用 @input= 我能够映射行的索引，以便分别更新数据

Vue.component('v-select', VueSelect.VueSelect);
new Vue({
  el: "#app",
  data(){
  return{
   productNameSearch: [{'id':2,'sku':'product-sku','product_name':'CP Plus 2.4 mp Indigo Bullet','product_attributes':{'id':10,'product_id':2,'original_price':1014.8,'product_mrp':'1014.8','sale_price':1249,}},{'id':2,'sku':'product-sku','product_name':'CP Plus 2.4 mp Indigo Bullet','product_attributes':{'id':10,'product_id':2,'original_price':1014.8,'product_mrp':'1014.8','sale_price':2349,}}],
   
  items: [
        {
          sno: "",
          selectedProduct: "",
          particulars: "",
          price: "",
          quantity: "",
          rowamount: "",
        },
      ],}
 
   
  },
  methods: {
    changedLabel(index, item) {
      console.log(index);
      console.log(item);
      console.log( item.product_attributes.sale_price);
      index.price = item.product_attributes.sale_price;
      console.log(index.price);
      // this.items = event
      // this.items.price = event.product_attributes.sale_price;
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">


<div id="app">
  <table class="table table-centered mb-0 rounded" style="width: 100%" aria-describedby="mydesc">
    <thead class="thead-light">
      <tr>
        <th scope="col" class="border-0" style="width: 10% !important">S No.</th>
        <th scope="col" class="border-0" style="width: 70% !important">
          Products
        </th>
        <th scope="col" class="border-0" style="width: 70% !important">
          Particulars
        </th>
        <th scope="col" class="border-0" style="width: 10% !important">price</th>
        <th scope="col" class="border-0" style="width: 10% !important">quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in items" key="item.id">

        <td class="border-0" style="width: 10% !important">
          {{index+1}}
        </td>

        <td class="border-0 fw-bold" style="width: 70% !important">
          <v-select @input="sku => changedLabel(item,sku)" class="form-select style-chooser" label="sku" v-model="item.selectedProduct" :options="productNameSearch" placeholder="Search"></v-select>
        </td>

        <td class="border-0 text-danger" style="width: 70% !important">
          <input v-model="item.particulars" type="text" class="form-control" />
        </td>
        <td class="border-0 fw-bold" style="width: 10% !important">
          <input v-model="item.price" type="text" class="form-control" :placeholder="item.price" />
        </td>
        <td class="border-0" style="width: 10% !important">
          <input v-model="item.quantity" type="text" class="form-control" />
        </td>
        <td class="border-0 fw-bold" style="width: 100% !important">
        </td>

      </tr>
    </tbody>
  </table>
</div>

如何通过方法 assign/pass 动态创建的行中的数据 - Vue.js

How do I assign/pass data in dynamically created row through a method - Vue.js

javascript

vue.js

v-select

vue-select