vue js使用單個處理程序觀看多個屬性

目前我必須觀看幾個屬性。如果他們每個人都改變，我必須調用相同的功能：vue js使用單個處理程序觀看多個屬性

export default{ 
    // ...... rest of code 
    watch: { 
     propa: function(after,before) { 
     doSomething(after,before); 
     }, 
     propb: function(after,before) { 
     doSomething(after,before); 
     } 
     // ... so on 
    } 
}

因此，我不得不多次寫上相同的代碼。是否有可能簡單地讓所有屬性被監視並調用其更改處理程序而不必多次編寫相同的代碼？

PS：我正在使用vue 1.x

來源

2017-03-11 rahulserver

取決於如何你的數據structured.If你把觀看了一個對象的數據，你可以看，隨着深單個對象：真實屬性，TRIGER是method.Also你可以看整個數據對象但我不建議這樣做。 –

我不認爲有什麼方法討論[這裏]（https://github.com/vuejs/vue/issues/844），你可以創建一個計算屬性完成[here]（https://jsfiddle.net/kmj6Lsae/3 /）但那也不是很乾淨。 – Saurabh

首先，您的定義可以簡化。 doSomething並不似乎是在Vue公司的方法，讓你的手錶可能只是

watch:{ 
    propa: doSomething, 
    propb: doSomething 
}

第二，有時是要記住的Vue定義對象只是普通的JavaScript對象是很重要的。他們可以被操縱。

如果你想觀看在數據對象的每屬性，你可以做這樣的事情

function doSomething(after, before){ 
    console.log(after,before); 
} 

function buildWatch(def){ 
    if (!def.watch) 
    def.watch = {}; 
    for (let prop of Object.keys(def.data)) 
    def.watch[prop] = doSomething; 
    return def; 
} 

let vueDefinition = { 
    data:{ 
    propa: "testing", 
    propb: "testing2", 
    propc: "testing3" 
    } 
} 

export default buildWatch(vueDefinition)

如果你想觀看只有你的屬性的一些定義的列表：

// First argument is the definition, the rest are property names 
function buildWatch(def){ 
    if (!def.watch) 
    def.watch = {}; 
    const properties = Array.prototype.slice.call(arguments,1); 
    for (let prop of properties) 
    def.watch[prop] = doSomething; 
    return def; 
} 

export default buildWatch(vueDefinition, "propa", "propb")

來源

2017-03-11 18:24:51 Bert

有沒有官方的方式來解決你的問題（see this）。但您可以使用計算屬性作爲技巧：

export default { 
    // ... 
    computed: { 
    propertyAAndPropertyB() { 
     return ${this.propertyA}|`${this.propertyB}; 
    }, 
    }, 
    watch: { 
    propertyAAndPropertyB(newVal, oldVal) { 
     const [oldPropertyA, oldProvertyB] = oldVal.split('|'); 
     const [newPropertyA, newProvertyB] = newVal.split('|'); 
     // doSomething 
    }, 
    }, 
}

如果您只是想做點什麼，而不在意新舊值是什麼。忽略兩條線

const [oldPropertyA, oldProvertyB] = oldVal.split('|'); 
const [newPropertyA, newProvertyB] = newVal.split('|');

來源

2017-08-24 05:08:54

vue js使用單個處理程序觀看多個屬性

回答

相關問題