Vuejs2 如何使用VueJS计算选定的复选框

我是VueJS新手，我正在尝试创建一个下拉列表，其中包含几个复选框，其中有一个按钮可将它们全部选中，并在每个框上单击一个事件以绑定单击，最后我要计算

{selected}

标记中的复选框

<p>{{selected}}</p>

<div class="uk-card uk-card-default uk-card-body" v-for="(data, value) in filteredList">
    <label><input class="uk-checkbox" type="checkbox" v-model="allChecked" :value="data.id" v-on:click="select(data, value)">{{data.name}}</label>
</div>

<div class="uk-inline">
    <label>
        <input type="checkbox" id="sAll" class="switchButton uk-button uk-button-default" value="Отметить все" v-model="checkAll">
    </label>
</div>

var menu = new Vue(
    {
        el: "#main_menu",
        data: function () {

            return {
                allChecked: [],
                selectedList: [],
                selected: 0,
                selections: [{id:1, name:"first"},{id:2, name:"second"},{id:3, name:"third"}]
            }
        },
        methods: {
            select: function(data, id){
                console.log(this.selectedList);
                if(this.selectedList.includes(data.name)){
                    this.selectedList.splice(id);
                } else {
                    this.selectedList.push(data.name);
                }
                this.selected = this.selectedList.length;
            }
        },
        computed: {
            checkAll: {
                get: function(){
                    return this.selections ? this.allChecked.length == this.selections.length: false;
                },
                set: function(value){
                    var allChecked = [];
                    if(value){
                        this.selections.forEach(function(item){
                            allChecked.push(item.id);
                        });
                    }
                    this.allChecked = allChecked;
                    this.selectedList = allChecked;
                    this.selected = allChecked.length;
                }
            }
        }
    }
)

{{selected}

{{data.name}
var菜单=新的Vue(
{
el:“主菜单”，
数据：函数（）{
返回{
全部选中：[]，
selectedList:[]，
已选择：0，
选择：[{id:1，名称：“第一”}，{id:2，名称：“第二”}，{id:3，名称：“第三”}]
}
},
方法：{
选择：功能（数据、id）{
console.log（此.selectedList）；
if（此.selectedList.includes（data.name））{
此.selectedList.splice（id）；
}否则{
此.selectedList.push（数据.名称）；
}
this.selected=this.selectedList.length；
}
},
计算：{
全选：{
get:function（）{
返回this.selections？this.allChecked.length==this.selections.length:false；
},
设置：函数（值）{
var allChecked=[]；
如果（值）{
this.selections.forEach（函数（项）{
全部选中。推送（项目id）；
});
}
this.allChecked=allChecked；
this.selectedList=allChecked；
this.selected=allChecked.length；
}
}
}
}
)

因此，我认为在列表项中添加一个属性，然后派生其他内容，这将更容易处理

选项：[{id:1，名称：，所选：BOOLEAN}]

一旦你这样做了，那么你需要做的所有其他事情就是处理这个列表，而不是编辑多个变量的状态

• 对于每个复选框，将复选框的值设置为选项的布尔值
• 在复选框上，单击调用一个名为

  toggleOption（id）

  的函数，创建该方法来处理按id查找和切换其选定状态的切换
• 在selectAll上，循环浏览选项列表，并将所有选项设置为selected或true，反之亦然
• 若要获取所选选项的列表，请创建一个选择所有选定选项的计算特性

---

听起来是个好主意，我会试试看，谢谢你的兴趣：）没问题。祝你好运下面是一篇关于v-model的好文章，它可能会帮助您完成您的旅程，并且