vue + element-ui项目,el-checkbox上的响应式问题——数据变化后勾选状态未变化

      先来简化一下项目原型。就是一个列表和一个表单,点击列表的某一项,表单中显示这一项对应的数据内容,并可修改。由于发现问题的是复选框,所以表单简化为一个复选框代替。

<ul>
    <li v-for="item in list" @click="clickFn(item)">{{item.name}}</li>
<ul>
<el-form :model="curItem">
    <el-checkbox v-model="curItem.isCheck" label="选择"></el-checkbox>
</el-form>
export default{
    data(){
        list:[{
            id:1,
            name:'Keith'
        },{
            id:2,
            name:'Annie'
        }],
        curItem:{}
    },
    methods:{
        clickFn(item){
            this.curItem = item
        }
    }
}

      初始状态下,列表中的每一项都没有选中复选框的属性。点击列表中第一项,勾选复选框,再点击第二项,此时复选框应该是未勾选状态,但却依然保留第一项的勾选状态。

      第一反应考虑到是属性的响应式的问题(详情参考这里),于是将click事件优化如下:

clickFn(item){
    this.$set(this , 'curItem' , item)
}

      然而复选框依旧没有取消勾选。但无意中发现,若将element-ui中的<el-checkbox>组件改为原生复选框,勾选状态就可以正常显示了。

<input type="checkbox" v-model="curItem.isCheck" />

      为什么原生复选框状态可以正常切换,el-checkbox却不可以,是组件本身的设计缺陷吗?为了方便在项目中直接调试,我在页面中独立引入element-ui中的CheckBox组件并在源码中输出log。

import checkboxOnly from 'element-ui/packages/checkbox';
export default{
    components:{
        checkboxOnly
    }
}
<el-form :model="curItem">
    <checkboxOnly v-model="curItem.isCheck" label="选择"></checkboxOnly>
</el-form>

      以下是简化后的源码(只保留了该案例中需要的部分)及log。

data(){
    return {
        selfModel: false
    }
},
computed:{
    //v-model绑定的值
    model:{
        get(){
            console.log('get-',this.value);
            console.log('get-',this.selfModel);
            return this.value !== undefined ? this.value : this.selfModel;
        },
        set(val){
            console.log('set-',val);
            this.$emit('input',val);
            this.selfModel = val;
        }
    },
    //复选框是否被选中
    isChecked(){
        console.log(this.model);
        return this.model;
    }
}

      根据log输出可知,在切换list时,虽然数据变了,但并没有触发model的set方法,所以当首次将selfModel设置为true后,后面get方法得到的值一直是true。产生这个问题的原因是,Vue 为了尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。若要两个元素完全独立,不要复用,添加具有唯一值的 key 即可。于是通过给表单增加key的方式,强制表单重新渲染,问题就解决了。

<el-form :key="curItem.id" :model="curItem">
    <el-checkbox v-model="curItem.isCheck" label="选择"></el-checkbox>
</el-form>

 

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 可以使用 `el-checkbox-group` 和 `el-option` 来实现 Vue2 的多选功能。 首先,需要在 Vue 组件导入 `el-checkbox-group` 和 `el-option` 组件。 ```javascript <template> <div> <el-checkbox-group v-model="selectedItems"> <el-checkbox :label="item" v-for="item in items" :key="item">{{ item }}</el-checkbox> </el-checkbox-group> </div> </template> <script> import { CheckboxGroup, Checkbox, Option } from 'element-ui'; export default { components: { ElCheckboxGroup: CheckboxGroup, ElCheckbox: Checkbox, ElOption: Option, }, data() { return { items: ['item1', 'item2', 'item3'], selectedItems: [], }; }, }; </script> ``` 在上面的代码,我们使用了 `el-checkbox-group` 组件来创建一个多选框组,并将选绑定到 `selectedItems` 变量。然后,我们使用 `v-for` 指令来循环渲染多个 `el-checkbox` 组件,每个组件的 `label` 属性设置为对应的 `item` 。 如果需要使用 `el-option` 组件来实现多选功能,可以将 `el-checkbox` 组件替换为 `el-option` 组件,并将 `el-checkbox-group` 组件替换为 `el-select` 组件。代码如下: ```javascript <template> <div> <el-select v-model="selectedItems" multiple> <el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option> </el-select> </div> </template> <script> import { Select, Option } from 'element-ui'; export default { components: { ElSelect: Select, ElOption: Option, }, data() { return { items: ['item1', 'item2', 'item3'], selectedItems: [], }; }, }; </script> ``` 在上面的代码,我们使用 `el-select` 组件来创建一个下拉框,将 `multiple` 属性设置为 `true` 来开启多选功能,并将选绑定到 `selectedItems` 变量。然后,我们使用 `v-for` 指令来循环渲染多个 `el-option` 组件,每个组件的 `label` 和 `value` 属性都设置为对应的 `item` 。 希望能帮到你! ### 回答2: 在Vue2,我们可以使用`el-option`和`el-checkbox-group`组件来实现多选功能。 首先,我们需要在Vue的实例引入`el-option`和`el-checkbox-group`组件。然后,创建一个数据数组来存储选项的,以及一个变量来确定选的选项。 接下来,在页面上使用`el-option`组件来呈现选项列表。我们需要使用`v-for`指令来遍历选项数据数组,并将每个选项的与显示文本传递给`el-option`组件。每个`el-option`组件需要使用`:label`属性将选项传递给组件,并使用插槽将选项文本呈现在页面上。 然后,我们使用`el-checkbox-group`组件来处理多选的交互逻辑。需要使用`:v-model`指令将选的选项绑定到一个变量上。这个变量可以是一个选项数组,用于存储所有选的选项的。 最后,我们可以使用`{{}}`的插语法,将选的选项数组的内容显示在页面上。 下面是一个示例代码的简单实现: ```html <template> <div> <el-checkbox-group v-model="selectedOptions"> <el-option v-for="option in options" :key="option.value" :label="option.text" :value="option.value"> {{ option.text }} </el-option> </el-checkbox-group> <p>选的选项:{{ selectedOptions }}</p> </div> </template> <script> export default { data() { return { options: [ { value: 'option1', text: '选项1' }, { value: 'option2', text: '选项2' }, { value: 'option3', text: '选项3' } ], selectedOptions: [] }; } }; </script> ``` 在以上代码,我们通过`el-checkbox-group`组件来实现多选的功能。`options`数组定义了所有的选项,`selectedOptions`数组用于存储所有选的选项。最后,通过插语法将选的选项数组显示在页面上。 ### 回答3: 在Vue2,我们可以使用`<el-option>`和`<el-checkbox-group>`来实现多选功能。 首先,我们需要引入Element UI库,并在Vue实例进行配置: ``` import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 接下来,我们可以在Vue的模板使用`<el-checkbox-group>`来创建多选框组件,并为每个选项使用`<el-option>`来定义选项的和显示文本: ``` <template> <div> <h3>选择你喜欢的水果:</h3> <el-checkbox-group v-model="selectedFruits"> <el-option v-for="fruit in fruits" :key="fruit.value" :label="fruit.label" :value="fruit.value"></el-option> </el-checkbox-group> </div> </template> ``` 接下来,我们需要在Vue的data选项定义`fruits`数组来存储可选的水果选项,并定义`selectedFruits`数组用于存储用户选择的水果: ``` export default { data() { return { fruits: [ { value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' }, { value: 'grape', label: '葡萄' }, ], selectedFruits: [], } } } ``` 最后,我们可以在Vue的实例使用`selectedFruits`数组来获取用户选择的水果。 ``` mounted() { console.log(this.selectedFruits); // 输出用户选择的水果 } ``` 通过上述步骤,我们就可以使用`<el-option>`和`<el-checkbox-group>`实现多选功能。用户可以通过勾选多个选项来选择他们所喜欢的水果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值