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