记一次机试todoList

codepen地址:
https://codepen.io/xiaodun/pen/RdgZNN
一开始编写大致是这样的

     <template>
        <div id="test-vue-id" ref="testDom">
          <div class="area">
            <br>
            <Row>
              <Input v-model="desc" type="text" @on-keydown.enter="onAdd" placeholder="请输入..."/>
            </Row>
            <br>
            <Row>
              <Checkbox @on-change="onToggleAll" v-model="isSelectAll">全选</Checkbox>
              <Button @click="onDelAll">批量删除</Button>
            </Row>
          </div>

          <div class="wrapper">
            <div class="item" :key="index" v-for="(item,index) in list">
              <Row>
                <Col span="3">
                  <input type="checkbox" :checked="item.isChecked">
                </Col>
                <Col span="18">{{item.content}}</Col>
                <Col span="3">
                  <Button>删除</Button>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </template>

问题在于，通过点击单个.item 选中时，再点击批量删除没有生效。

当时想到的是，动态添加属性、Vue.$set之类的...,但又觉得不对。
这个问题在我添加的时候已经避免了

      this.list.push({
          content: this.desc,
          isChecked: false
        });

在push时，要事先声明所有要用到的属性。

真正的问题在于

<input type="checkbox" :checked="item.isChecked">

:checked 是单向数据绑定，所以通过点击是无法改变item.isChecked的值，使用v-model就没有问题了。

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

恍然大悟，以前一直没怎么在意单向数据绑定和双向数据绑定的概念。

我看了看IView陷入沉思...

感觉即便以后尘埃落定，像这种能在周六、周日有机考的面试也要参加一下，嘿嘿。

推荐一下我自己维护的Vue项目
https://github.com/xiaodun/sf-pc-web/tree/v1.0.0/tools_home