I'm loading some data from server and than try to load dimensionscodes
into Dropdown list using a Vue.js for-loop.
But when i try to select something from dropdown in first row , it will update all other dropdown list with that value, as you see here:
How can i avoid this ? when i choose something from dropdown just update that dropdown not the others.
HTML:
<div id="app">
<table id="tbl" style="display:none;" class="table">
<thead>
<tr>
<th>Varenummer</th>
<th>Beskrivelse</th>
<th>Kategorier</th>
</tr>
</thead>
<tbody id="tblitems">
<tr v-for="product in products">
<td>
{{product.varenummer}}
</td>
<td>
{{product.description}}
</td>
<td>
<select class="dropdown" v-model="selecteddimensioncode">
<option value="">-- Vælg --</option>
<option v-for="code in dimensionscodes" :key="code.value" :value="code.value">{{code.text}}</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
Vue.js
<script>
new Vue({
el: '#app',
data() {
return {
products: [],
dimensionscodes: [],
invoicenumber: '',
selecteddimensioncode: ''
};
},
methods: {
fetchVarenummer: function () {
$.ajax({
"url": '@Url.Action("xxx", "xxx")',
"method": "GET",
"data": { "invoicenumber": this.invoicenumber },
success: result => {
$("#tbl").show();
this.products = result.products;
this.dimensionscodes = result.dimensionscodes;
},
error: result => {
console.log(result);
}
});
}
}
})
</script>
I find out i should use v-bind:value="selecteddimensioncode"
instead of v-model="selecteddimensioncode"
in this way its not going to reactive and update all dropdown.
<select class="dropdown" v-bind:value="selecteddimensioncode">
<option value="">-- Vælg --</option>
<option v-for="(code, index) in dimensionscodes" :key="index" :value="code.value">{{code.text}}</option>
</select>