实现代码:
<template>
<div class="main ">
<el-radio-group
class="mt-20px"
size="small"
:value="value"
@input="testHandler"
>
<el-radio
v-for="(item, index) in options"
:key="index"
:label="item.value"
>{{ item.name }}</el-radio
>
</el-radio-group>
<div class="mt-15px">
<span
v-for="(item, index) in value1"
:key="index"
class="mr-15px"
>{{ item }}</span
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ name: '按钮1', value: '12' },
{ name: '按钮2', value: '13' },
],
value: '',
options2: {
12: ['1', '2', '3'],
13: ['4', '5', '6'],
},
value1: [],
};
},
mounted() {},
methods: {
testHandler(name) {
this.$confirm('是否要切换切换会清空信息', '确认切换?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.value = name;
this.value1 = this.options2[name];
});
},
},
};
</script>
<style lang="scss" scoped></style>
解决思路:把双向绑定的值改为单项绑定,单项绑定只能通过更改model层来更改view层,而双向绑定是 view <==>model 之间相互改变的
效果: