章胖胖的笔记

# Vue2 中 checkbox 的一个小问题

今天将公司项目中的Vue1.0升级到Vue2的时候发现一个checkbox的问题

在1.0的时候 列表数据渲染的时候我是将每条数据插入一个 isCheck 字段 Boolean 类型来判断checkbox是否被选中

但是升级到Vue2的时候 我发现将记录的 isCheck 字段从 true 设为 false 的时候并不能改变checkbox的状态

代码如下：

new Vue({
    el: "#app",
    data() {
        return {
            list: {
                "222": { isCheck: false },
                "333": { isCheck: false }
            }
        };
    }
});

后面回去翻看文档发现单个 checkbox 的时候可以用 Boolean 来改变状态

多个复选框的时候需要额外定义的一个数组来记录每个 checkbox 绑定的 value 值

单复选框代码如下：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多复选框代码如下：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
    el: "#example-3",
    data: {
        checkedNames: []
    }
});

文档还是看的不够细致啊 哈哈

← 2019-12-05 →