“类似购物车结构”在计算属性上出现的问题(v2.5.17)
发布于 2个月前 作者 daGaiGuanYu 753 次浏览 来自 问答

小弟在做一个购物车“全选”的时候遇到一个问题。类似下图 (点全选,所有物品都被选中;只要有一个物品被取消选中,全选状态就被取消)

思路:专门建一个数组记录选中状态,“全选”用一个计算属性,并把这个计算属性绑定在全选那个checkbox上

这个是调整后,正常的结果代码(“选中状态数组”没一个元素是一个对象,每个对象有个state属性 true为选中,false为不选)

<div id="app">
    <label><input type="checkbox" v-model="all">全选</label>
    <div v-for="(item,index) in arr">
        <label>
            <input type="checkbox" v-model="arr[index].state">
            物品-{{index}}
        </label>
    </div>
</div>

new Vue({
    el: '#app',
    data: {
        arr: [{
            state: false,
        },{
            state: false
        }]
    },
    computed: {
        all: { // 全选状态对应的计算属性
            get(){
                var result=true;
                this.arr.forEach(function(item){
                    if(!item.state)
                        result=false;
                });
                return result;
            },
            set(v){ 
                // 取消全选状态时,遍历记录选中状态的数组,并设置state
                for(index in this.arr){
                    this.arr[index].state=v;
                }
            }
        }
    }
});

但是,最开始的时候,用来记录状态的数组是 [ true, false, false ] 这种,码如下,但是,,,并不好使。虽然说找到解决问题的办法就ok,但是出现了意想不到的事,不弄明白还是感觉怪怪的,请各位大佬赐教。

<div id="app">
    <label><input type="checkbox" v-model="all">全选</label>
    <div v-for="(item,index) in [1,2,3]"> <!-- 这里,由于不能直接把递归对象放在v-model上,所以,随便写了个数组,用来造成三次循环 -->
        <label>
            <input type="checkbox" v-model="arr[index]">
            物品-{{index}}
        </label>
    </div>
</div>

new Vue({
    el: '#app',
    data: {
        arr: [false,false,false]
    },
    computed: {
        all: {
            get(){
                var result=true;
                for(let index in this.arr){
                    if(!this.arr[index])
                        return false;
                }
                return true;
            },
            set(v){
                for(index in this.arr){
                    this.arr[index]=v;
                }
            }
        }
    }
});
2 回复

一个是值类型, 一个是引用类型

@ab8512 值类型的变化跟踪不到……?

回到顶部