vue,checkbox选中对应name存入数组,取消选中从数组中移除怎么写?

<template>
    <div class="select-box">
        <div @click="showOrHide">{{ chkNum }}{{ defaultUserNum }}</div>
        <transition name="checkboxselect">
            <div class="select-list" v-show="isCheckBoxShow">
                <label :for="item.value" v-for="(item, index) in usersTypes" :key="item.value">
                    <input type="checkbox" :id="item.value" @click="count(item.value, item.name, index)" ref="chkb" :name="item.name" />{{ item.name }}
                </label>
            </div>
        </transition>
    </div>
</template>
<script>
export default {
    name: "CheckBoxSelect",
    props: {
        // 选项
        usersTypes: {
            type: Array,
        },
        // 框中单位/内容
        defaultUserNum: {
            type: String,
        },
    },
    data() {
        return {
            isCheckBoxShow: false, // 下拉选项是否显示
            chkNum: 0, // 选中复选框数量
            selectedChkList: [], // 存放被选中的选项
        };
    },
    methods: {
        // 计算选中的checkbox数量和选中的项的value和name
        count(value, name, index) {
            var nums = 0;
            var chk = this.$refs.chkb;
            // console.log(chk);
            for (var i = 0; i < chk.length; i++) {
                if (chk[i].checked) {
                    nums++;
                }
            }
            this.chkNum = nums;
        },

        // 显示或隐藏选项框
        showOrHide() {
            this.isCheckBoxShow = !this.isCheckBoxShow;
        },
    },

代码和效果如上,这是子组件,想选中某一项就把它的name值存到数组selectedChkList中,取消选中则把这个name从数组中移除,然后把这个数组传递给父组件,这个怎么实现?求教,谢谢!

查看全部
weixin_41359495
H_Franky
2020/11/25 22:10
  • css
  • html5
  • vue.js
  • css3
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信

3个回复