web-dev-qa-db-ja.com

Vue 2のデータオブジェクト内のすべてのキーを監視する方法

私のデータオブジェクト：

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

私のテンプレート：

<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>

選択した両方のインデックスを同時に見るにはどうすればよいですか？インデックスが更新されるたびに、このようなことをしたいです。

watch: {
    selected: function(o, n) {
        ...
    }
}
watchvuejs2vue.js
13
Anonymous

Vueの watcher で提供されるdeepオプションを使用できます。ドキュメントに記載されているとおり：

オブジェクト内のネストされた値の変更も検出するには、options引数にdeep：trueを渡す必要があります。配列の突然変異をリッスンするためにそうする必要はないことに注意してください。

コードは次のようになります。

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

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

selectedから新しいデータを計算しようとしている場合、計算プロパティを使用できます。Vueのデータはリアクティブであるため、計算プロパティも変更を検出できます。データの。

単一の関数を使用してオブジェクト全体を監視する場合は、$watch with deep: true：

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

ご了承ください '$data.selected'は文字列で、Vueはそれを解析します。

そしてあなたの方法で：

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

これができると思います：

watch: {
    $data: {
        handler: function(val, oldVal) {
            console.log(val)
        },
        deep: true
    }
},
6
AbdessamadEL