鍍金池/ 問答/HTML/ vue 中 watch 多個屬性變化問題

vue 中 watch 多個屬性變化問題

data定義一個 filter 過濾參數(shù)屬性, filter 中多m個屬性

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

watch監(jiān)聽屬性變化，去讀取數(shù)據(jù)

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

有一個按鈕，修改filter n 個屬性,

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

這時候 watch會觸發(fā)多次，如果讓它只觸發(fā)一次呢？

回答
編輯回答
薄荷糖

this.filter = {

a: xx,
b: xx

}
這樣是可以的。絕對沒問題。

2017年2月19日 08:05
編輯回答
舊螢火

一起賦值試過嗎

let t = JSON.parse(JSON.stringify(this.filter))
t.a=xx
t.b=xx
this.filter = t
2017年12月25日 02:25
編輯回答
影魅

即使你同時修改了n個屬性，watch也是觸發(fā)一次?。?/p> 

<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

輸出結(jié)果如上圖，a和b都改變了，并且只log一次。

2017年8月11日 06:04
編輯回答
局外人

如果你不需要 watch 來管理
個人建議(僅僅只是建議) 就寫個方法 在你 修改完 數(shù)據(jù) 后 去調(diào)用吧
或者說

this.filter = {
    a: xx,
    b: xx
}

不知道可以不可以

2017年9月10日 15:13
編輯回答
陌顏

每次賦值時，變更原有的數(shù)據(jù)地址，然后監(jiān)控當(dāng)前數(shù)據(jù)（deep：true也不需要）即可

2018年1月6日 01:56