Vue 全选 单选问题

Question

点击所有商品的时候，全选不选中

    <ul class="editing">
        <li class="ui-row" v-for="(item,index) in items">
            <div class="ui-col ui-col-10">
                <div class="check-container">
                    <span class="check " v-bind:class="{'checked':item.checked} " @click="selectedProduct(item)"></span>
                </div>
            </div>
            <div class="ui-col ui-col-90">
                <div class="name-card clearfix">
                    <div class="quantity" style="display: none">
                        <button class="minus" type="button"></button>
                        <input type="text" name="nums" class="txt" pattern="[0-9]*" v-model="item.amount">
                        <button class="plus" type="button" ></button>
                        <div class="response-area response-area-minus"  @click=" changeMoney(item,-1)"></div>
                        <div class="response-area response-area-plus" @click=" changeMoney(item,1) "></div>
                    </div>
                    <a href="#" class="thumb js-goods-link"><img class="js-lazy" src="./img/liulian.jpg"> </a>
                    <div class="detail"><a href="#" class="js-goods-link">
                        <h3 class="title js-ellipsis"><!---->
                            <i>{{item.title}}</i>
                        </h3>
                    </a>
                        <p class=" ellipsis">{{item.guige}}</p>
                        <div class="num">×<span class="num-txt">{{item.amount}}</span></div>
                        <div class="price color-red">¥<span>{{item.price2}}</span></div></div>
                    <div class="error-box"></div>
                    <div class="delete-btn" v-on:click="shanchu" :czid="item.id"><span>删除</span></div>
                </div>
            </div>
        </li>

    </ul>
 methods: {
       
        //如何让Vue 监听一个不存在的变量 单选操作
        selectedProduct:function (item) { // 接收的参数
            var _this =this;
            if( typeof item.checked == 'undefined'){
                Vue.set(item,"checked",true);
            }else {
                item.checked = !item.checked;
            }
            this.caleTotalPrice();
        },
        checkAll:function () { // 定义全选 函数
            this.checkAllFlag = true ;
            var _this = this;
            _this.items.forEach(function (item,index) { // 用forEach来遍历 items
                if(item.checked == 'undefined'){ // 先判断 是否有这个 item.checked
                    Vue.set(item,"checked",_this.checkAllFlag);  // 没有 先注册
                }else if(item.checked == true){
                    Vue.set(item,"checked","false");  // 没有 先注册
                    item.checked = false;
                    $("#check").removeClass("checked")
                }else {
                    item.checked = _this.checkAllFlag;
                    $("#check").addClass("checked")
                }
            });
            this.caleTotalPrice();
        }
        
    }

点击一个商品的时候，不能全选
跪求求思路

Answer 1

既然用Vue了就操作数据，尽量不操作DOM。
写了个小demo Vue 全选单选问题，可供参考。

<template>
    <div id="app">
        <a href="https://segmentfault.com/q/1010000012675796?_ea=3106401" target="_blank">SF上的Vue 全选 单选问题</a>
        <ul>
            <li class="checked-item" @click="singleSelect(row, index)" v-for="(row, index) in goods">
                <input type="checkbox" :checked="row.checked"/>{{row.name}}
            </li>
        </ul>
        <div>
            <span @click="allSelect">
                <input type="checkbox" :checked="isAllSelected"/>
                <button>全选</button>
            </span>
            <span class="checked-count" v-if="checkedGoodIds.length > 0">已选择：{{checkedGoodIds.length}}项</span>
        </div>
    </div>
</template>

<script>
    new Vue({
        data: {
            goods: [{
                id: 1,
                name: '选项1-xuanyuan1',
                checked: false
            }, {
                id: 2,
                name: '选项2-xuanyuan2',
                checked: false
            }, {
                id: 3,
                name: '选项3-xuanyuan3',
                checked: false
            }, {
                id: 4,
                name: '选项4-xuanyuan4',
                checked: false
            }, {
                id: 5,
                name: '选项5-xuanyuan5',
                checked: false
            }, {
                id: 6,
                name: '选项6-xuanyuan6',
                checked: false
            }],
        },
        computed:{
            // 是否全选
            isAllSelected(){
                return this.goods.every((el) => {
                    return el.checked;
                })
            },
            // 选中商品的id
            checkedGoodIds(){
                let filterArr = this.goods.filter((el) => {
                    return el.checked;
                });
                return filterArr.map((el) => {
                    return el.id;
                })
            }
        },
        methods: {
            // 全选、全不选
            allSelect() {
                let checked = true;
                // 全选
                if(this.isAllSelected){
                    checked = false;
                }
                this.goods = this.goods.map(el => {
                    el.checked = checked;
                    return el;
                })
            },
            // 单选
            singleSelect(row, index) {
                row.checked = !row.checked;
                this.goods.splice(index, 1, row);
            }
        }
    }).$mount('#app')
</script>

Answer 2

1.确实是的,操作dom时vue的性能有点浪费,
2.除了楼上说的这种原生实现方法,还可以借用element插件的indeterminate 状态来实现复选效果,http://element.eleme.io/#/zh-...

Answer 3

定义一个计算属性来控制“全选”的状态

computed: {
    isAllSelected() {
        return this.items.every(item => item.checked);
    }
},

Answer 4

刚写的,感觉比楼上的好那么一丢丢,所以贴上来一起看看

---

<template>
    <div id="app">
        <ul>
            <li v-for="(row, index) in goods">
                <input type="checkbox" v-model='selectArr' v-value='row.id'/>{{row.name}}
            </li>
        </ul>
        <div>
            <span @click="selectAll()">
                <input type="checkbox" :checked="isAllSelected"/>
                <button>全选</button>
            </span>
        </div>
    </div>
</template>

<script>
    new Vue({
        data: {
            goods: [{
                id: 1,
                name: '选项1-xuanyuan1',
            }, {
                id: 2,
                name: '选项2-xuanyuan2',
            }, {
                id: 3,
                name: '选项3-xuanyuan3',
            }, {
                id: 4,
                name: '选项4-xuanyuan4',
            }, {
                id: 5,
                name: '选项5-xuanyuan5',
            }, {
                id: 6,
                name: '选项6-xuanyuan6',
            }],
            selectArr:[],
            
        },
        methods: {
            selectAll:function () {
                if (this.selectArr.length == this.goods.length) this.selectArr= [];
                else {
                    this.selectArr= [];
                    this.selectArr= this.goods.map((event, index)=>{return event.id;});
                }
            }, // 全选
    }).$mount('#app')
</script>

直接搬了楼上的代码改了一哈..