Vue solves the problem that the data data changes and the view does not update

background:

When el-input data binding is encountered in the project, the input box does not display the problem (in order to solve the problem that the data is updated but the view is not updated)

reason:

Sometimes el-input has many levels of nesting, and two-way data binding cannot be realized, which leads to the problem that the input box does not display.

The root of it is that the data in the data in the vue example is processed into responsive. If you add new attributes to this data, obviously, the new attributes are not processed into responsive data, resulting in the view not being updated.

Method:

1. Reduce the number of nesting layers

2. Use this.$forceUpdate() method to force refresh

// 监听input事件
<el-input v-model="loginForm.username" 
placeholder="请输入用户名" 
@input="change($event)">
</el-input>

// 在method方法中写
    // 多层嵌套无法输入解决方法
    change(e) {
      this.$forceUpdate()
    },

3. Use this.$set(this.data,"key",value') to add properties to the object

Note: the difference between $forceUpdata(), $set() and $nextTick()

1. Both $forceUpdata() and $set() are used to update the view

2. $nextTick() is not to update the view, but to wait for the data view to be updated before performing certain operations