The problem of multiple attribute changes of watch in vue

data define a filter Filter parameter attribute, filter multiple m attributes 

filter: {
    a:null,
    b:null,
    c:null,
    c:null,
}

watch listen for property changes to read data 

"filter" :{
    handler:"getProduct",
    deep:true
}

has a button to modify filter n attributes, 

function(){
    this.filter.a=xx
    this.filter.b=xx
    ...
    ...
}

at this time watch will trigger multiple times. What if it is triggered only once?

Vue.js
Mar.09,2021

even if you modify n attributes at the same time, watch is triggered once: 

<template>
  <div class="hello">
    <h1 @click="change">click</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      filter: {
        a: null,
        b: null,
        c: null
      }
    }
  },

  watch: {
    filter: {
      handler: 'getProduct',
      deep: true
    }
  },

  methods: {
    change () {
      this.filter.a = Math.random()
      this.filter.b = Math.random()
    },

    getProduct () {
      console.log(this.filter)
    }
  }
}
</script>

clipboard.png

The

output is shown in the figure above, a and b have changed, and only log once.

if you don't need watch to manage
personal suggestions (just suggestions), write a method to call
or

after you modify the data. 
this.filter = {
    a: xx,
    b: xx
}

I don't know if it's possible

have you tried assigning values together 

let t = JSON.parse(JSON.stringify(this.filter))
t.a=xx
t.b=xx
this.filter = t

each time you assign a value, change the original data address, and then monitor the current data (deep:true does not need it) to

this.filter = {

a: xx,
b: xx

}
this is OK. Absolutely no problem.

Previous: It is no problem to use the local pdf of pdf.js to show the effect, but it is different to use the pdf path given by the background to show the effect of pdf,?

Next: Is there any quick solution in Python to see the dependencies of each module?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu