element-ui中slider赋值问题

Question

这是一个之前在工作的时候解决了的问题，但是对于原理一直没有了解得很清楚。

代码片段是这样的：

<el-form :model="form" label-width="100px">
  <el-form-item label="原值:">
    <el-slider v-model="form.original" show-input :max="10"></el-slider>
  </el-form-item>
  <el-form-item label=".方式赋值:">
    <el-slider v-model="form.fail1" show-input :max="10"></el-slider>
  </el-form-item>
  <el-form-item label="[]方式赋值:">
    <el-slider v-model="form.fail2" show-input :max="10"></el-slider>
  </el-form-item>
  <el-form-item label="object.assign方式赋值:">
    <el-slider v-model="form.success" show-input :max="10"></el-slider>
  </el-form-item>
</el-form>

下面是赋值方式：

edit(row) {
  this.drawerVisible = !this.drawerVisible;
  this.title = "编辑";
  let data = {
    original: 5
  };
  this.form = Object.assign({}, data, {
    success: data.original
  });
  this.form.fail1 = this.form.original;
  this.form["fail2"] = this.form.original;
},

实际运行的时候.fail和["fail2"]这样的方式能展示但是slider并不能拖动

至于原因也找到了

失败的两种并没有get和set方法，当时解决了这个问题大致了解了和对象的数据属性有关就没有再深究

Observer/Dep/Watcher是如何实现数据绑定的
今天看到这篇文章时候又想起来了，是因为vue没有监听到数据的变化，还是slider自己的原因，对于对象的机制理解得不够透彻，希望有大佬能帮忙解惑

Answer 1

在vue中给对象添加属性使用 Vue.set(vm.obj, 'e', 0) 或 this.$set(this.obj,'e',0)方法

写成这样
this.$set(this.form, 'fail1', this.form.original)