Dynamic binding of forms in vue

There is a form:

<el-form :model="configForm">

</el-form>

If configForm is initialized to {}, this object is dynamically changed. If it is assigned later, this

this.configForm[key1] = '';
this.configForm[key2] = '';
this.configForm[key3] = ''

Vue cannot detect its changes. Vue will only detect changes in its own value (object array is a pointer). If it is an object, it can detect changes in properties that already exist in the initialization object, but will not detect new properties;

At this point it should look like this:

var configForm = {};

configForm[key1] = '';
configForm[key2] = '';
configForm[key3] = '';

this.configForm = configForm;

Reassign this.configForm, the pointer changes, vue will detect it

 

Related learning:  http://es6.ruanyifeng.com/#docs/object#%E5%B1%9E%E6%80%A7%E5%90%8D%E8%A1%A8%E8%BE%BE%E5 %BC%8F