vue+elementUI 使用单选框和复选框时获取数据不回显问题

获取全弄平台学习资源

• 场景:

使用elementUI单选框和复选框,动态循环渲染数据时,选中数据无法回显到页面.

原因：

因为Vue的数据劫持机制

• 解决方案一

尽量避免对data(){return { }}里的数据进行频繁赋值.

尽量避免嵌套方式赋值.

<div v-for="(tiem,index) in Data" :key="index" class="">
    <div>
       <el-radio-group v-model="tiem.modelValue">
           <el-radio-button v-for="(value,value_index) in tiem.radioData" 
                                                    :key="value_index"
                                                    :label="value">{{value}}</el-radio-button>
       </el-radio-group> 
    </div>
</div>

export default{
    name:"",
    data(){
        return{
            Data:[]
        }
    },
    mounted(){
        this.$axios({
            methods:"get",
            url:"",
            params:{}
        }).then((response)=>{
            //先声明一个变量
            let init_data = [];
            //将response里边的数据处理成readio格式的数据
            //最后将init_data的数据整体赋值给Data
            this.Data = init_data;
        })
        
    }
}

• 解决方案二

在添加动态添加数组时推荐使用arrayAPI

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

在操作对象时要使用

this.$set(target,key,value)