The problem of not being able to enter the value in the input input box in the vue project and the solution

Edit page v-model bound input input box cannot enter value

reason

• Object will recursively traverse all variables defined in data, so if it is not defined, it will not be able to listen for changes.
• Only a few array methods will respond if added to the array, and the subscript will not respond (push, pop will not respond)

Solution

After obtaining the data from the backend, define a new object, receive the backend value into the new object, and assign the new object to the object defined in data.

    if( == true){
        let resForm={}  //Redefine an object         resForm={...}
         =[,],                  
         =
         =
         ={...resForm}  // Assign the defined object to the object defined in data         (,2121212121)
  }

vue skill point--el-input input box cannot be entered or modified

Phenomenon

Using the Vue framework, I found that the contents of the input box <input> or <el-input> cannot be modified or entered.

Solution

First of all, check the binding method, you should use v-model, and sometimes you will misuse :value, which will make it impossible to modify.

Secondly, if it is a complex object such as binding array elements, you can add @input="onInput()" to the input box, and then add a method in methods:

      onInput() {
      this.$forceUpdate();
    },

forceUpdate is used to force rendering to avoid the situation where the object level in data is too deep and the Vue framework does not render automatically.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.