Question

我是VueJS的新手，我试图制作一个下拉列表，其中包含几个复选框，其中有一个按钮可以全部选中它们，并在每个复选框上单击一个事件以绑定单击，最后我想对选中的复选框进行计数<p>{{selected}}</p>标签中的框。

<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;
                }
            }
        }
    }
)

Answer 1

因此，我认为您可以通过将属性添加到列表项然后派生其他内容来处理此问题。

options: [{id:1, name:"", selected: BOOLEAN}]

一旦您执行了此操作，那么您所需要的所有其他功能就是在该列表上工作而不是在多个变量上编辑状态的功能。

对于每个复选框，将复选框的值设置为选项的布尔值
在复选框上，单击调用toggleOption(id)的函数，创建该方法以处理通过id查找和切换其选定状态的切换
在selectAll上，遍历选项列表，并将所有选项都设置为true，deselectAll相反。
要获取所选列表，请创建一个计算属性，以选择所有选中的选项

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

1 个答案: