vue2.0入手踩坑系列文章-表单初始值（Vue.set）

---

1：浏览器怪异现象
表单元素操作失灵，不可以修改其值。

2：原因
页面在一上来就想让表单元素有个初始值，并且这个表单元素的值后续可以正常改动（带有双向绑定的特性），有两种做法：

【方式一】：那么在data中必须先声明好对应的字段，否则后续修改失灵。
源码：

    // 数据绑定
    data() {
      return {
        // 表单数据 双向绑定响应的
        sendParams:{
          effectiveTime:[]
        }
      }
    },
  // 扩展属性，并赋默认值
   created() {
      this.sendParams.effectiveTime = ["2018-07-13 00:00:00", "2018-07-18 00:00:00"]
  }

原理：

对于这种双向绑定的表单数据，实例创建时候给表单数据对象sendParams的一个属性赋默认值，但是此时dom还没上来，也就是不可能有用户的对应数据录入，表单对象sendParams身上还没有这个属性名，那我们要赋值，必须在data中先声明

【方式二】：采用Vue.set的方式。

源码：

  // 扩展属性，并赋默认值
    created() {
      Vue.set(this.sendParams, 'effectiveTime', ["2018-07-13 00:00:00", "2018-07-18 00:00:00"])
    }

原理：

当给一个被观测的对象（props 、 data）添加一个新属性时，不能直接添加，必须使用 Vue.set 方法。否则新增的属性的值是没办法响应式改变的。
Vue.set 给某对象扩展属性时，如果此对象是响应式的，那该扩展出来的新属性也是响应式的，同时触发视图更新

效果：
日期控件恢复正常。（这里是elementUI中组件）

image.png