如何在javascript中访问另一个对象内的嵌套对象？

Question

我正在使用 Vue.js，并且我有一个想要动态访问属性的数据对象。但我似乎无法动态访问过滤器对象的属性。

export export default {
    template: ``,
    data() {
        return {
            something: 'This is some value.',
            filters: {
                fullSearch: 'This is full search.'
            }
        }
    }
}

我可以访问“某物”，但无法动态访问 filters.fullSearch。

这行得通

console.log(this['something']) // This is some value.

但这不起作用

console.log(this['filters.fullSearch']) // Component.js:589 undefined

这是完整的代码。我正在遍历 this.$route.query 的所有属性，并将它们分配给我的数据中的过滤器，就像这样。但它不起作用。我做错了什么？

for (let [key, value] of Object.entries(this.$route.query)) {
    if (this['filters.' + key] !== undefined) {
        this['filters.' + key] = value
    }
}

Answer 1

你需要用正确的property accessor来寻址内部对象。

this['filters']['fullSearch']

或具有静态属性

this.filters.fullSearch

Answer 2

应该是

console.log(this['filters']['fullSearch'])

或

console.log(this['filters'].fullSearch)

或

console.log(this.filters.fullSearch)

Answer 3

您混合了点和括号表示法。以下解决方案将起作用。

for (let [key, value] of Object.entries(this.$route.query)) {
    if (this['filters'][key] !== undefined) {
        this['filters'][key] = value
    }
}