Vue+weui 这些小白问题你遇到过吗

复选框勾选标签

需求及数据如下图

需求分析

1. 先获取所有标签信息，即tagsData (包括id和name)
2. 获取需要默认勾选的标签信息，即oriTagsData （只需要id）
3. 实现点击勾选与取消勾选的切换——勾选时，将此项id push进oriTagsData中，取消勾选时，splice 该项

实现方法

用两个v-for先展示出标签组名和标签列表

再用v-model="oriTagsData" :value="item1.id"绑定了勾选项id和所有标签id

在单项标签位置增加click事件：判断click的这项标签的id是否在oriTagsData中，如果存在，说明click之前已经被勾选，click后要取消勾选，那么用indexOf找到它在oriTagsData的位置，再用splice删除这个位置的数据，这样需要勾选的数据中就没有该项，自然就取消了勾选；如果id不存在在oriTagsData中，说明需要勾选上，push该项id进oriTagsData，实现勾选功能

实现代码

         <div v-for="(item, index) in tagsData" :key="index">
             <div class="partTitle">{{ item.name }}</div>
             <div
               class="weui-cells weui-cells_checkbox"
               v-for="(item1, index1) in item.tags"
               :key="index1"
               @click="changeStatus(item1)"
             >
              <label
                class="weui-cell weui-cell_active weui-check__label"
                for="s11"
              >
                <div class="weui-cell__hd">
                  <input
                    type="checkbox"
                    class="weui-check"
                    v-model="oriTagsData"
                    ref="checkref"
                    :value="item1.id"
                  />

                  <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                  <p>{{ item1.name }}</p>
                </div>
              </label>
            </div>
          </div>

     changeStatus(item1) {
      //勾选
      if (this.oriTagsData.indexOf(item1.id) < 0) {
        this.oriTagsData.push(item1.id);
      } else this.oriTagsData.splice(this.oriTagsData.indexOf(item1.id), 1);//取消勾选
      // console.log(this.oriTagsData);
    },

解决过程 首先，让我们看看weui关于复选框的html

作为一个没有系统学习过前端的菜鸡，我的第一想法是给checked绑定事件返回布尔值，由此判断是否需要勾选。于是我用ref获取所有项的DOM节点，返回数组doms，再用index1想通过 doms[index1] 去获得正在操作的DOM节点的checked值，然后用!checked实现勾选切换。返回的数组每一项都有checked值，但doms[index1]输出则没有任何属性，输出doms[index1].checked不管有没有勾选返回的全是true。如果看到这篇文章的hxd知道怎么操作的请在评论区教教我，感恩。

我去问学姐，她说：“用v-model试试呢。”

然后我就用v-model和click绑定事件，最后解决了这个问题。我只知道v-model是可以双向绑定的，平时用也没深究，解决问题之后去搜索v-model看到了这篇文章# 面试官：你真的了解 v-model 吗？(vue2)

“对于原生 html 原生元素，vue 干了大量『脏活儿』”，深以为然。

思考总结

太菜了，很多知识点都不懂不会应用，还是得学。