在寫代碼時遇到一個小問題，代碼模擬如下：
<div>
<el-radio-group v-model="value">
<el-radio-button label="1">張三</el-radio-button>
<el-radio-button label="2">李四</el-radio-button>
<el-radio-button label="3">王五</el-radio-button>
</el-radio-group>
<div>
<dictSelect v-if="1 == value" v-model="value2" :options="options1" @change="change1"></dictSelect>
<dictSelect v-if="2 == value" v-model="value2" :options="options2" @change="change3"></dictSelect>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
value2: '',
dataKey: new Date().getTime(),
options1: [
{ key: '1', value: '編號：316165390658961408 暫無證件號' },
],
options2: []
}
},
}
</script>
dictSelect是自己封裝過的el-select組件凌净，里面有一個功能是如果options有值，會自動選中第一個值并觸發(fā)change事件
問題如下：value從張三切換到李四時，options2為空蔗蹋，在組件中查看數(shù)據(jù)options取到的值也是為空，但是組件會把options1的值渲染出來囱淋，如下圖所示：
問題
這種問題好解決嘛猪杭，加個
key就好了。我想dictSelect組件一次只會加載一個妥衣，我就沒必要在每個dictSelect上都加key了皂吮，直接在父元素上加一個key好了戒傻，代碼如下：
<div :key="dataKey">
<dictSelect v-if="1 == value" v-model="value2" :options="options1" @change="change1"></dictSelect>
<dictSelect v-if="2 == value" v-model="value2" :options="options2" @change="change3"></dictSelect>
</div>
以上代碼，同時在value值切換時更新key蜂筹，但是這樣會出現(xiàn)組件加載時選中第一個值會觸發(fā)一次change事件需纳，key更新時組件更新會再次觸發(fā)change事件，導致change事件觸發(fā)兩次的問題
解決以上問題只需要艺挪，把key加到每個組件上就ok了不翩，并且key不需要使用動態(tài)key，只需要使用固定字符串就可以了
代碼如下：
<div>
<dictSelect key="dictKey1" v-if="1 == value" v-model="value2" :options="options1" @change="change1"></dictSelect>
<dictSelect key="dictKey2" v-if="2 == value" v-model="value2" :options="options2" @change="change3"></dictSelect>
</div>
