Vue.js - 変数keypathを持つプロパティのウォッチャー

Question

Vue v2では、変数を含むキーパスを使用してウォッチャーを定義できますか？例えば

、currentKeyに応じて、私はobj.Aまたはobj.Bの変化のいずれかを見たい：

data() { 
    return { 
    currentKey: 'A', 
    obj: { A: { 'a': '' }, B: { 'b' :'' }, 
    } 
}, 
watch: { 
    'obj[currentKey]'(newItem, oldItem) {} 
} 

Answer 1

あなたはthis.obj[this.currentKey]を返し、その上ウォッチャーを設定し、計算プロパティを作ることができます。

ただし、動的オブジェクトのプロパティの変更を監視する場合は、ウォッチャーのdeepプロパティをtrueに設定する必要があります。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     currentKey: 'A', 
 
     obj: {A: {value: ''}, B: {value:''} }, 
 
    } 
 
    }, 
 
    computed: { 
 
    selected() { 
 
     return this.obj[this.currentKey]; 
 
    } 
 
    }, 
 
    watch: { 
 
    selected: { 
 
     deep: true, 
 
     handler(object) { 
 
    \t console.log('selected object value', object.value); 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script> 
 
<div id="app"> 
 
    Selected object: {{ selected }} 
 
    <select v-model="currentKey"> 
 
    <option v-for="i in ['A', 'B']" :key="i" :value="i">{{ i }}</option> 
 
    </select> 
 
    <br><br> 
 
    Text for selected object: <input v-model="selected.value"> 
 
</div>

：ここ

は簡単な例です