如何通过方法在动态创建的行中分配/传递数据 - Vue.js

问题描述

如何更新表中动态创建的行中的字段。 我将数据传递给 v-select 并且我想使用用户选择的相同数据。

我想要达到的目标

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

例如： 在第 1 行，如果我选择 product-sku ，我想将相应的价格分配给 item.price 然而 在第 2 行，如果我选择 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',}}],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>

解决方法

必须通过 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,'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>