[Talk about the problem that the Vue project view does not update]

Let’s talk about the problem that the data change view is not updated in the Vue project.

During work, sometimes we encounter some data changes in the Vue project, but the view does not refresh.

Renderings:

code show as below:

<template>
  <div class="hello">
    输入的值inputValue：<input v-model="inputValue" @input="changeObjValue" />
    <div>绑定的值obj.a：{
   
   {obj.a}}</div>
    <div>绑定的值obj.o.m.n：{
   
   {obj.o.m.n}}</div>
    <div>绑定的值arr[2]：{
   
   {arr[2]}}</div>
    <button @click="setObjValue">set value</button><br />
    <button @click="setObjNValue">set obj.o.m.n value</button><br />
    <button @click="setArrValue">set arr[2]</button>
  </div>
</template>

<script>
export default {
      
      
  data(){
      
      
    return{
      
      
      inputValue: '',
      obj:{
      
      
        a:'',
        o:{
      
      
          m:{
      
      
            n: ''
          }
        }
      },
      arr: [1,2,3]
    }
  },
  created(){
      
      
    // this.obj = {}
  },
  methods:{
      
      
    changeObjValue(){
      
      
      this.obj.a = this.inputValue
      this.setObjValue()
    },
    setObjValue(){
      
      
      if(this.obj.a) this.obj.a += '1111->'
      if(!this.obj.a) this.obj.a = '1111->'
      // if(this.obj.o.m.n) this.obj.o.m.n += '2222->'
      // if(!this.obj.o.m.n) this.obj.o.m.n = '2222->'
      // if(this.arr[2]) this.arr[2] += '3333->'
      // if(!this.arr[2]) this.arr[2] = '3333->'
      //  this.arr[2] += '3333->'
      // this.$set(this.arr,2,'111')
      console.log('obj.a==== ',this.obj.a)
      console.log('obj.o.m.n==== ',this.obj.o.m.n)
      console.log('arr[2]==== ',this.arr[2])
    },
    setObjNValue(){
      
      
      // this.obj.o.m.n = '2222->'
      this.setObjValue()
    },
    setArrValue(){
      
      
      // this.obj.o.m.n = '2222->'
      this.arr[2] += '3333->'
      console.log('arr[2]==== ',this.arr[2])
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
      
      
  text-align: left;
  margin: 15% 20%;
  line-height: 40px;
}
</style>

Situation analysis:
When will the view not be updated (complex data types like Object, Arrary):

1. When we define an Array in data and change the corresponding element.
2. When we define an Object in data and do not assign an initial value to the attribute in the data (such as a in obj above).
3. When we define an Object in data, the attributes in the data have been assigned initial values, but when the data is operated on, the attributes are lost or deleted.
   

Solution:
How to solve the problem that the above view does not update:

1. The simplest and rude method is to assign the defined obj/arr data as a whole (but pay attention to the consistency of attributes to avoid attribute loss, and it is not recommended for complex data structures).
2. Vue provides the $set method (but the $set method is also used in the project, but the view is not updated. At this stage, after searching for the problem, it is found that either the data has not been assigned an initial value, or the data is in the process of operation. is lost).
3. For data with complex data structures such as contracts and forms, it is recommended to split the data, and then compose the data desired by the backend when transmitting the data and submit the request.

Summary:
In the process of our work or study, all kinds of data must be processed carefully, and the readability of the data should be improved as much as possible to facilitate problem finding.
ps: If the project encounters other situations in the future, this article will continue to be updated! ! ! You are also welcome to make additions.