0

How do I update a field in a row that is being dynamically created in a table. I am passing the data to v-select and I would like to use the same data that user has selected.

What i am trying to acheive

I am trying to search product.. I am using [v-select][1] to fetch the products. Once I fetch the product I am trying the update the row with the product value.

for eg: In row 1 if I select product-sku , I would like to assign the respective price to item.price where as In row 2 if I select product-sku1 , I would like to assign the respective price to item.price

I am dynamically creating rows.

While I was able to fetch the individual product results. I cannot update it to the rows.

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>
mightyteja
  • 825
  • 1
  • 14
  • 38

1 Answers1

0

Had to go through the Vue Select in v-for Loops documentation.

In my case I was not able to figure out to which instance the event was emitted,

Using @input= I was able to map the index of the row so that data is updated respectively

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>
mightyteja
  • 825
  • 1
  • 14
  • 38