How to have multiple select boxes in Vue
Imagine you had a v-for loop with a list of data that have an identical select box for each. How can these two select boxes share v-model to get their values without affecting each other, so they are separate?
new Vue({
el: '...',
data: {
selected: ''
}
})
Though your question is not clear enough, but may be you are looking for the following solution -
new Vue({
el : "#main",
data:{
tableData : [
{ 'name' : 'A', 'age' : 30 },
{ 'name' : 'C', 'age' : 50 },
{ 'name' : 'B', 'age' : 40 },
]
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="main">
<table border="4">
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr v-for="row in tableData">
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>
<select v-model="row.name">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
</table>
</div>