Currently, I have a list of items that users can add new items to. Each item is required to have a select box, and the selected value from the select box should be assigned as the item's value.
In an attempt to bind the select box to the item using the v-for key directive, I implemented the following code:
<div id="app">
{{message}}
<span v-on:click="addNewItem">Add New item</span>
<section v-for="(item, key) in items">
{{item.val}}
<select v-modal="items[key].val">
<option v-for="default in defaults.selectBox">{{default}}</option>
</select>
</section>
</div>
JavaScript:
new Vue({
el:'#app',
data: {
message: 'testing',
defaults:{ selectBox : ['VUE','REACT','ANGULAR']},//some default vaues
items: [{val:'VUE'},{val: 'REACT'}] //intial two items
},
methods:{
addNewItem:function(){ //add new dynamic items
this.items.push({val:''});
}
}
});
Despite my efforts, the select box is not even displaying.
I am at a loss for what mistake I may be making here. How can I achieve the desired outcome (where the selected value is assigned to the item val)?