Jak mogę oglądać wszystkie klucze w obiekcie danych w Vue 2

Question

Mój obiekt danych:

data: { 
    selected: { 
     'type': null, 
     'instrument': null 
    }, 

Mój szablon:

<select v-model="selected['instrument']" @change="switchFilter('instrument', $event)"> 
    <option v-for="instrument in instruments" :value="instrument.value">@{{ instrument.text }}</option> 
</select> 

<select v-model="selected['type']" @change="switchFilter('type', $event)"> 
    <option v-for="type in types" :value="type.value">@{{ type.text }}</option> 
</select> 

Jak mogę oglądać zarówno wybranych indeksów w tym samym czasie? Chcę zrobić coś takiego za każdym razem każdy z aktualizacji indeksów:

watch: { 
    selected: function(o, n) { 
     ... 
    } 
} 

Answer 1

Można użyć deep możliwości przewidzianej przez watcher od Vue. Jak podano w dokumentacji:

Aby wykryć zmiany wartości zagnieżdżonych wewnątrz obiektów, należy podać głębokie: prawda w argumencie opcji. Zauważ, że nie musisz tego robić, aby słuchać mutacji macierzy.

kod

Będziesz wyglądać jak następuje:

watch: { 
    'selected': { 
     handler: function (val, oldVal) { 
      console.log('watch 1', 'newval: ', val, ' oldVal:', oldVal) 
     }, 
     deep: true 
    } 
} 

Answer 2

watch: { 
    'selected.type': function (newSelectedType) { 
    console.log(newSelectedType) 
    }, 

    'selected.instrument': function (newSelectedinstrument) { 
    console.log(newSelectedinstrument) 
    } 
} 

Jeśli dopiero próbuje obliczyć nowe dane z selected, można po prostu użyć obliczonych właściwości, ponieważ dane Vue są reaktywne, obliczone właściwości mogą również wykrywać zmiany danych.

---

Jeśli chcesz korzystać z pojedynczą funkcję, aby obejrzeć cały obiekt, można użyć $watch z deep: true:

mounted() { 
    this.$watch('$data.selected', this.onSelectedUpdate, { deep: true }) 
} 

nuta że '$data.selected' jest ciągiem znaków, Vue będzie je analizować.

iw waszych metod:

onSelectedUpdate (newSelected) { 
    console.log(newSelected) 
}