console
var vm = new Vue({
el: '#app',
data: {
selectedArr: [{
selected:'a0',
optionArr:[
{ text: '01', value: 'a0' },
{ text: '02', value: 'b0' },
{ text: '03', value: 'c0' }]
}]
},
methods: {
getCurrentIndex:function(value){
for(var i=0;i<this.selectedArr.length;i++){
for(var j=0;j<this.selectedArr[i].optionArr.length;j++){
if(this.selectedArr[i].optionArr[j].value === value){
return i
}
}
}
},
addSelected:function(index){
this.selectedArr.push({
selected:'a'+index,
optionArr:[
{ text: index+'1', value: 'a'+index },
{ text: index+'2', value: 'b'+index },
{ text: index+'3', value: 'c'+index }]
})
},
removeSelected:function(index){
if( index < this.selectedArr.length ){
this.selectedArr.splice(index,this.selectedArr.length)
}
},
select:function(e){
var current = e.target.value;
var currentIndex = this.getCurrentIndex(current)+1;
this.removeSelected(currentIndex);
this.addSelected(currentIndex);
}
}
})
<div id="app">
<select v-for="(obj,key) in selectedArr" v-model="obj.selected" @change="select" :key="key">
<option v-for="item in obj.optionArr" :value="item.value" :key="item.value">{{item.text}}</option>
</select>
<p>selectedArr: {{ selectedArr }}</p>
</div>
select{
margin-left:10px;
width:66px;
}