如何在Vue 2中查看数据对象中的所有键

Question

我的数据对象：

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

Answer 1

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

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

如果您只是试图从所选的中计算一个新数据，您可以使用计算属性，因为Vue的数据是反应性的，计算属性也可以检测数据的变化。

如果要使用单个函数查看整个对象，可以将$watch与deep:true配合使用：

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

请注意，“$data.selected”是一个字符串，Vue将对其进行解析。

在你的方法中：

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

Answer 2

我想你可以做到这一点：

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

Answer 3

您可以使用vue的监视器提供的深层选项。正如文档中所述：

要同时检测对象内部的嵌套值更改，需要在options参数中传入deep:true。请注意，您不需要这样做来侦听数组突变。

您的代码如下所示：

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