如何在 VueJS 中访问 [__ob__: Observer] 的元素？答案

【问题标题】：How to access the elements of [__ob__: Observer] in VueJS?如何在 VueJS 中访问 [__ob__: Observer] 的元素？
【发布时间】：2018-05-10 06:29:27
【问题描述】：

我对 VueJS 还很陌生。有一个父组件，数据从中传递给子和孙。

我的子组件看起来像这样，

B.vue

import C from './c.vue'

export default{

    props:['info'],

    components:{
        'c': C
    },
    
    created: function(){
      this.getInfo();
    },

    methods: {
        getInfo: function(){
            console.log("Printing inside get method", this.info);
        }
    }
}

<template>
  <div>
    <c :info="info"></c>
  </div>
</template>

当我看到控制台时，我看到一个这样打印的数组，

当我尝试像这样访问数组的元素 info[0] 时，控制台显示未定义。我无法访问数组的元素。有人可以帮我吗？谢谢！

【问题讨论】：

Chrome 检查器会在脚本运行时继续更新对象。您可以尝试记录 observable 的副本以了解我的意思。您可能需要使用稍后的生命周期挂钩或订阅 observable 以获得您正在寻找的值
@JamiCouch 我尝试将其记录在已安装的生命周期挂钩中。我仍然无法访问。它说未定义。
信息是什么
您尝试在代码中访问info[0] 的具体方式和位置？

标签： javascript arrays vue.js vuejs2 vue-component

【解决方案1】：

<template>
  <div>
    <c :info="info"></c>
  </div>
</template>

:info="info" 会将您的外部组件info 属性传递给c 组件。如果该外部组件没有属性info，它将导致您现在可以看到undefined（根据cmets）。

如果您只是想测试行为并且您的目标是将字符串 info 传递到您的组件 c 中，那么您可以通过以下方式将其作为字符串传递：

<template>
  <div>
    <c :info="'info'"></c>
  </div>
</template>

或者没有::

<template>
  <div>
    <c info="info"></c>
  </div>
</template>

为什么？因为: 是v-bind: 的简写，它查找javascript 对象，并且由于:info="info" 等于:info=info，你实际上想使用:info="'info'"，因为这将等于：info='info'。

您可以在 Vue.js 的 Props Doc 部分阅读更多关于其工作原理的信息：https://vuejs.org/v2/guide/components-props.html

如果在您的外部组件中设置了 info 属性 - 请告诉我们如何为您提供进一步的帮助。

【讨论】：

当它记录一个数组时，似乎数据被正确地传递到了 B 组件（通过它的 'info' 属性）。所以我认为:info="info" 是他们应该将它传递给C的方式。
@Grillparzer 不，这不正确。 :info="info" 将寻找变量 info 作为道具传递。如果你想传递字符串info="info"应该是这样的。

【解决方案2】：

如果 info 来自服务器或任何异步方法，如果在您的子组件安装之前数据尚未准备好，mounted 仍然会引发错误。

如果子组件需要 info 道具，我认为条件渲染的最佳方式：

<c v-if="info" :info="info"></c>

或类似的东西。如果你想要一个加载状态，你应该处理子组件内部的未定义数据，如果info未定义则渲染加载状态，并在可用时渲染其他内容。

【讨论】：

【解决方案3】：

如果您尝试访问 create 上的 info 内容，则 prop 可能尚未通过。您最好在mounted 上查看它。

您在控制台中看到info 的内容，因为浏览器控制台中的输出已更新。如果您现在想知道 info 的内容是什么，请像这样打印 JSON 表示：JSON.stringify(this.info)

【讨论】：

【解决方案4】：

我在这里找到了解决方案：

https://forum.vuejs.org/t/how-to-access-the-elements-of---ob---observer-in-vuejs/22404/5

子组件不会“等待” axios 完成，所以它是最初使用空数组呈现信息。

如果您想在渲染之前等待数据出现子组件，在子组件上使用 v-if="info.length > 0" 父母的模板。

它现在对我有用，我想分享我找到的解决方案。

【讨论】：

【解决方案5】：

在这种情况下，this.info 是 :Observer，因为您在完成之前对 prop 进行了安慰，在这种情况下，如果您在 mounted() lifehook 中调用 this.getInfo() 而不是 created()，您将能够获取道具本身（如在mounted() 中道具已经通过），而不是观察者。

这就是为什么您可以在控制台中看到对象为 :Observer 类型和其中的内容，而不是 this.info[0]，因为它正在等待传递道具。

在这里你可以找到一个更广泛地谈论它的威胁：Vue JS returns [__ob__: Observer] data instead of my array of objects

【讨论】：

【解决方案6】：

调试此问题的一种方法是使用名为 Vue.js DevTools 的 chrome 扩展程序，该扩展程序可在 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en 找到。该扩展将允许您检查传递给每个组件的道具，并根据这些信息，您应该能够确定您的道具在父、子、孙子链中的哪个位置丢失了。

【讨论】：