Solve the problem that the Vue component props value object cannot be obtained

Let’s talk about the problem first. The parent component uses props to pass the value to the child component. The browser console has this value, but it cannot obtain the internal properties. It has been trapped for 3 hours. It really **

personal
console

The following is the original code

1. (Parent component)--personal is the passed parameter

<!--Subcomponents-->
<form-picker class="form-picker"
 :personal="personal"
>
</form-picker>
export default {
  data(){
    return{
      personal:{
        state:'',////Judge whether to modify the status or add the status add/edit        data:[]
      }
    }
  },
  mounted(){
   this.$().then((res)=>{
      =  // Here we assign the data from the interface to the personal object    })
  },
}

2. formPicker (subcomponent) --Receive personal

export default {
  props:['active','personal'],
  mounted(){
    (149,)
    (150,)
  }
}

Running results

It is obvious that 149 lines have a state value, but the output of 150 lines is gone. Isn't it super strange?

After the explanation from the boss, the browser should not have it.

So, in fact, our subcomponents did not get the personal object at the beginning.

3. Solution--Use watch

Parent component

export default {
  data(){
    return{
      personal:{
        state:'',////Judge whether to modify the status or add the status add/edit        data:[]
      }
    }
  },
  mounted(){
   this.$().then((res)=>{
     // = // Here we assign the data from the interface to the personal object     //Use the following method to reassign the value. The above method cannot be monitored. I don’t know the specific reason. Please let me know if you know it!  Thanks      = {
      data: ,
      state: 'edit'
     }
    })
  },
}

Next, the subcomponent can watch to personal.

watch:{
   personal(newValue,oldValue){
    (181,newValue) 
   },
/** Output
     {
       data: ,
       state: 'edit'
      }
 **/
  }

Summarize

The above is the problem that the editor introduced to you to solve the problem that the Vue component props value object cannot be obtained. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!