我正在嘗試在計算物件上使用 Vue 觀察器，但它根本不起作用。如果它只是一個字串，它可以正常作業，但如果它是一個物件，則不能正常作業。我遵循了 Vue 檔案，但是當物件更改時，我仍然沒有將任何內容記錄到控制臺。正如我在 Vue Tools 中確認的那樣，物件和計算屬性的屬性正在發生變化。我究竟做錯了什么？謝謝
<v-btn small dark @click="test1.asdf = 'blah'">Test</v-btn>
data() {
return {
test1: {},
}
},
computed: {
test(){
return this.test1
}
},
watch: {
test: {
handler: function(val, oldVal) {
console.log(oldVal, val);
},
deep: true
}
}
uj5u.com熱心網友回復：
試試這個代碼，它作業正常
<template>
<div id="app">
{{ test1 }}
<hr />
<button @click="test1.asdf = 'blah'">Click</button>
</div>
</template>
<script >
export default {
data() {
return {
test1: { asdf: "HEY" },
};
},
computed: {
test() {
return this.test1;
},
},
watch: {
test: {
handler: function (val, oldVal) {
console.log(oldVal, val);
},
deep: true,
},
},
};
</script>
我猜在你的情況下你應該.native在你的點擊事件結束時添加這樣的@click.native="test1.asdf = 'blah'"
uj5u.com熱心網友回復：
只是嘗試通過替換整個物件。它運行良好，并且無需使用asdf資料中的屬性初始化物件：
<v-btn small dark @click="test1 = { ...test1, asdf: 'blah'}">Test</v-btn>
...test1如果有的話，展開語法有助于將其他屬性保留在目標物件中，因此您可以安全地添加該asdf屬性，而不必擔心丟失任何內容。
JSFiddle：https ://jsfiddle.net/vh72a3bs/22/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/364340.html