select,option变化,如果option不存在上次的选项,自动清空上次的选择
javascript
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in arr"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button @click="fun">fun</el-button>
<el-button @click="fun2">fun2</el-button>
<el-button @click="fun3">fun3</el-button>
<el-button @click="fun4">fun4</el-button>
</template>
</div>
var Main = {
data() {
return {
arr:[],
options: [{value: '黄金糕',label: '黄金糕'}, {
value: '双皮奶',label: '双皮奶'}, {
value: '蚵仔煎',label: '蚵仔煎'}],
options2: [{value: '黄金糕2',label: '黄金糕2'}, {
value: '双皮奶2',label: '双皮奶2'}, {
value: '蚵仔煎2',label: '蚵仔煎2'} ,{
value: '蚵仔煎',label: '蚵仔煎'}],
value: ''//
}
},
methods:{
fun(){
this.arr= this.options
},
fun2(){
this.arr=this.options2
},
fun3(){ this.arr=[]},
fun4(){ alert(this.value)}
},
watch:{
arr(val){
let data=val.find(i=>i.value==this.value)
if(!data)this.value=''
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')