element select 设置预先的值后无法选择问题

element select 设置预先的值后无法选着问题

		<el-select
          v-model="form.value"
          placeholder="请选择"
          style="width: 100%">
          <el-option
            v-for="item in roles"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

created() {
    this.form.value = '1'
  },

解决方法

执行过程中无法选择内容？使用 @change 输出，发现 value 已经改变了。

那就是视图没有更新。
第一个想到方法就是在 change 里加 this.$forceUpdate() 进行强制更新

	s(d){
      this.$forceUpdate()
      console.log(this.form.value)
    },

果然就可以了！

还有一个方法就是赋值的时候使用 this.$set

  created() {
    this.$set(this.form, 'value', '1');
  },

原因

Vue使用Object.defineProperty() 将data里的对象属性转为getter/setter，当改变数值时就会调用到setter，触发监听进行视图更新。

但没在data里声明的属性并没有被转成getter/setter，就不会有监听，无法触发视图更新。