鍍金池/ 問答/HTML/ vue可以根據(jù)數(shù)據(jù)內(nèi)的某個鍵值觸發(fā)更新函數(shù)嗎?

vue可以根據(jù)數(shù)據(jù)內(nèi)的某個鍵值觸發(fā)更新函數(shù)嗎?

需求:

  • 使用v-for渲染了一個列表,內(nèi)容是{{a}},實例的data形如
    item:[{a:false},{a:true},{a:false},{a:true}]
  • 當(dāng)data中某一元素中a的值發(fā)生改變時,觸發(fā)一個函數(shù)

問題:

  • 如果使用watch來檢測item中具體哪一個數(shù)據(jù)發(fā)生了變化,可以獲取索引嗎?
  • 使用computed可以實現(xiàn)嘛?
回答
編輯回答
耍太極

可以 watch 也可以 computed。
watch 的話需要 deep watch:

watch: {
    list: {
        deep: true,
        handler( newList, oldList){
            const changedIndex = newList.findIndex((item, index)=> {
                oldList[index] !== item // 這里判斷不嚴(yán)謹(jǐn),你自己寫判斷方法
            })
            // changedIndex 就是發(fā)生改變的位置
        }
    }
}

computed 需要計算出你需要監(jiān)聽的那一項,然后再 watch 它,適合你明確知道自己想監(jiān)聽第幾項的情況,比上邊的性能好一點,畢竟監(jiān)聽的少。

2018年2月23日 10:15
編輯回答
笑忘初

可以watch整個item嘛。

computed的話可以返回更新后的結(jié)果組成的數(shù)組再v-for組件。

提供個粗糙的思路哈

computed:{
    value(){
        return this.item.map((item)=>{
            if(item){
                //觸發(fā)更新函數(shù)
               return update()
            } else {
                return <未更新的值>
            }
        })
    }
}

然后 v-for="value"

2017年3月8日 17:13