Question

我有以下代码：

            console.log("My Object is:");
            console.log(this.LoadedBaseMapLayersContent);

            for(obj of this.LoadedBaseMapLayersContent)
            {
            //  console.log(obj);
              console.log("can't get this string");
            }

我正在检查this.LoadedBaseMapLayersContent是否有数据，而且它似乎有内部对象，但它有非常奇怪的类型[__ob__: Observer]。

在控制台中，我看到下一个：

My Object is:
[__ob__: Observer]
0: Array[1]
__ob__: Observerlength: 1
__proto__: Array

但我无法理解为什么我的代码无法进入for of循环？

Answer 1

来自Reactivity In Depth

将纯JavaScript对象作为数据传递给Vue实例时   选项，Vue.js将遍历其所有属性并进行转换   使用Object.defineProperty将它们添加到getter / setter。这是个   仅ES5和不可调整功能，这就是Vue.js不支持的原因   IE8及以下版本。

getter / setter对于用户是不可见的，但是在引擎盖下它们   使Vue.js能够执行依赖关系跟踪和更改通知   何时访问或修改属性。

您没有显示数据项的外观，但是从日志中可以看出您有这样的内容：

LoadedBaseMapLayersContent: {0: ['value']}

哪个不能作为数组迭代。

Answer 2

您可以使用Object.getOwnPropertyNames访问对象道具并传递当前的vue对象，然后遍历每个属性。

new Vue({
    el: '#app',
    mounted() {
        var self = this;
        var listOfProps = Object.getOwnPropertyNames(this.user);

        listOfProps.forEach(elementProp => console.log(objectProps[elementProp]));
    },
    data: {
        user: {
            name: 'dany',
            lastname: 'paredes'
        }
    }
})

Vue：不能迭代Object

2 个答案: