【前端element-ui】对于封装el-select和checkbox-group的多选控件导致数据双向绑定失败问题的处理
一、关于通过父组件props传参el-select【下拉多选模式】双向绑定失败问题处理方式
1、this.$emit(“change”, val); 采用change二不是input
2、对_value赋值不能直接使用"="号，而是push
<template><div><el-select v-model="_value" multiple clearable placeholder="请选择选项" @change="handleValue"><el-option v-for="(v, index) in options" :key="index" :value="v" :label="v"></el-option></el-select></div>
</template>
<script>export default {name: "multiple",props:{value:{type: Array,default: () => {return []}},options:{type: Array,default: () => {return []}},},computed:{_value: {get() {return this.value;},set(val) {this.$emit("change", val);}}},methods: {handleValue(data){this._value.splice(0, this._value.length);data.forEach(el=>{this._value.push(el)})}}
}
</script>
二、关于通过父组件props传参checkbox-group【多选框】双向绑定失败问题处理方式
1、内部事件采用@input而不是@change=“handleValue”
2、对_value赋值不能直接使用"="号，而是push
<template><div><el-checkbox-group v-model="_value" @input="handleValue"><el-checkbox v-for="(v, index) in options" :key="index" :label="v" >{{v}}</el-checkbox></el-checkbox-group></div>
</template>
<script>export default {name: "checkbox",props:{value:{type: Array,default: () => {return []}},options:{type: Array,default: () => {return []}},},computed:{_value: {get() {return this.value;},set(val) {this.$emit("change", val);}}},methods: {handleValue(data){this._value.splice(0, this._value.length);data.forEach(el=>{this._value.push(el)})}}
}
</script>