在写代码时遇到一个小问题，代码模拟如下：
<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有值，会自动选中第一个值并触发change事件
问题如下：value从张三切换到李四时，options2为空，在组件中查看数据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，但是这样会出现组件加载时选中第一个值会触发一次change事件，key更新时组件更新会再次触发change事件，导致change事件触发两次的问题
解决以上问题只需要，把key加到每个组件上就ok了，并且key不需要使用动态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>
