Solve the problem of Vue2.0 watch object property change cannot be listened to

question

I encountered a problem a long time ago, when the parent component passes values ​​to the child component, the child component listens for a certain property of the incoming object. I found that even the child components cannot observe the changes in the properties in the object using deep watch. Today, I finally found why this problem and solution occurred.

solve

Why does this problem occur? Due to ES5 restrictions, the addition or removal of object properties cannot be detected.

Please refer to/guide/

Solution:

This.$set(object, key, value) method of vue

Recreate an object by(), for example = ({}, , { a: 1, b: 2 })

Code example

<template>
 <div>
 <p @click="fun1" style="color: blue">Method one</p>
 <p @click="fun2" style="color: blue">Method 2</p>
 </div>
</template>

<script>
export default {
 data () {
 return {
  p: {a: 1}
 }
 },
 methods: {
 fun1 () {
  ('click 1111')
  // = 2 // By assigning values ​​through point method, it is found that no changes in p are observed  this.$set(, 'b', 2) // The first solution is to view the log to see that changes have been heard. },
 fun2 () {
  ('click 2222')
   = ({}, , {c: 3})
 }
 },
 watch: {
 p: {
  handler (cval, oval) {
  ('--------')
  (cval, oval)
  },
  deep: true
 }
 }
}
</script>

<style>

</style>

Summarize

I personally recommend using the second solution, which makes the code more elegant. The first solution is to have multiple values ​​appear if there are multiple values, and the $set() statement is multi-line.

The above article solves the problem of inability to monitor the attribute changes of Vue2.0 watch object. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.