web-dev-qa-db-fra.com

Comment regarder toutes les clés d'un objet de données dans Vue 2

Mon objet de données:

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

Mon modèle:

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

Comment puis-je regarder les deux index sélectionnés en même temps? Je veux faire quelque chose comme ça à chaque fois que l'une des mises à jour des index:

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

Vous pouvez utiliser l'option deep fournie par watcher de vue. Comme indiqué dans les documents:

Pour détecter également les changements de valeur imbriqués dans les objets, vous devez passer deep: true dans l'argument options. Notez que vous n'avez pas besoin de le faire pour écouter les mutations de la matrice.

Votre code ressemblera à ceci:

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

Si vous essayez simplement de calculer de nouvelles données à partir de selected, vous pouvez simplement utiliser des propriétés calculées, car les données de Vue sont réactives, les propriétés calculées peuvent également détecter les changements des données.

Si vous souhaitez utiliser une seule fonction pour surveiller l'intégralité de l'objet, vous pouvez utiliser $watch avec deep: true:

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

notez que '$data.selected' est une chaîne, Vue va l'analyser.

et dans vos méthodes:

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

Je pense que vous pouvez le faire:

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