Vue中在使用v-for或v-if下ref获取DOM不到undefined的问题

Bebe_guIP属地: 湖南
0.12字数 237

首先项目中购物车列表是v-for 动态渲染的数据,其中checkbox组件包含在每个li中动态渲染出来,在做全选的时候是没有问题的,因为全选按钮是在页面写死的,在做单个按钮选择的时候this.$refs.name.checked获取得到undefined。

1.jpg

这一点官方已经早就交代过,动态渲染的ref可能不会获取到DOM

QQ截图20190715171110.jpg

然而,实际发现,$refs.name获取的是一个数组,数组点属性肯定是undefined。
那么首先要获取到每一个checkbox的checked属性肯定需要用到index,那么,在v-for的时候就可以把index传进来,并且传给@changde方法中,这样就可以获取到每个checkbox的checked了,然后关联判断选择状态,代码如下:

组件中代码

                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle">
                        <div class="cart-left">
                            <div class=" mui-checkbox">
                                <input name="checkbox" value="Item 1" type="checkbox" ref="checkbox" @change="checked(index)">
                            </div>
                        </div>
                        <div class="cart-image">
                            <img :src="item.msrc" alt="">
                        </div>
                        <div class="cart-right">
                            <p>{{item.title}}</p>
                            <p class="maxnum">库存:<span id="maxnum">{{item.maxnum}}</span></p>
                            <p class="cart-price"><span>¥{{item.price}}</span>
                                <cartnumbox :initcount="item.count" :maxnum="item.maxnum" @getnum="getnum"></cartnumbox>
                            </p>
                        </div>
                    </div>
                </li>

methods

            checkAll() {
                    if (this.$refs.checkAll.checked) {
                        mui(this.$refs.checkbox).each(function() {
                            this.checked = true;
                        });
                        this.checkednum = mui(this.$refs.checkbox).length;
                    } else {
                        mui(this.$refs.checkbox).each(function() {
                            this.checked = false;
                        });
                        this.checkednum = 0;
                        this.checkboxsum = 0;
                    }
                    console.log('总数' + this.checkboxsum);
                    console.log('选择数' + this.checkednum);
                },
                //单个选择
                checked(index) {
                    this.checkboxsum = mui(this.$refs.checkbox).length;
                    console.log(this.$refs.checkbox[index].checked);
                    if (this.$refs.checkbox[index].checked) {
                        //选择的个数保存到data中
                        this.checkednum++;
                    } else {
                        this.checkednum--;
                    }
                    if (this.checkednum == this.checkboxsum) {
                        this.$refs.checkAll.checked = true;
                    } else {
                        this.$refs.checkAll.checked = false;
                    }
                    console.log('总数' + this.checkboxsum);
                    console.log('选择数' + this.checkednum);
                }

最后效果

checkbox1.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
2人点赞
总资产1共写了2303字获得15个赞共2个粉丝