v-model修改不实时更新的问题

在实现点击事件input值修改的问题上,怼了一个小时。Vue的版本是2.9.6,官网的文档,永远都是写的那么的简洁明了。本人是参不透,只能在实战中恍然大悟以后才明白其中的道理。

例子:

<el-form-item label="订单号" label-width="100px">
     <el-input v-model="form.tradeno" style="width:280px;"></el-input><el-button @click="autotradeno()">生成订单号</el-button>
</el-form-item>

export default {
    data() {
       return {
          'form': {
               tradeno: ''
           }
       }
     }
     methods: {
        autotradeno: function(){
             const id = (this.S4() + this.S4() + this.S4());
             this.$set(this.form,'tradeno',id);
             //this.form.tradeno = id;
             console.log(id);
        },
}

官方文档 深入响应式原理一节,这样解释道:对于对象,Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

Default image
菠萝头

想说点什么