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

by

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>

Leave a comment