如何在VueJS中访问[__ob__：Observer]的元素？

Question

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

My Child组件看起来像这样，

B.vue

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我看到控制台时，我看到一个像这样打印的阵列，

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

Answer 1

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

:info="info"会将您的外部组件info属性传递到c组件中。如果该外部组件不具有属性info，它将导致undefined立刻出现（根据评论）。

如果您只是想测试行为，并且您的目标是将字符串info传递到组件c中，则可以像这样将其作为字符串传递：

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

或没有:：

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

为什么？因为:是寻找JavaScript对象的v-bind:的简写，并且由于:info="info"等于:info=info，所以您实际上想使用:info="'info'"，因为这是相等的到：:info='info'。

您可以在Vue.js的“ Props Doc”部分中了解有关其工作原理的更多信息：https://vuejs.org/v2/guide/components-props.html

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

Answer 2

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

Answer 3

在这种情况下，this.info是:Observer，因为您要在道具实现前安慰它，在这种情况下，如果您在this.getInfo()救生钩中呼叫mounted()的created()中的道具本身（如mounted()中的道具已经通过），而不是观察者。

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

在这里您可以找到有关此威胁的更广泛的讨论：Vue JS returns [__ob__: Observer] data instead of my array of objects

Answer 4

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

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

子组件不会“等待” axios完成，因此 最初使用空数组表示信息。

如果您要在呈现数据之前等待数据出现 子组件，请在以下子组件中使用v-if =“ info.length> 0” 父级的模板。

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

Answer 5

如果您尝试访问create上的信息内容，则该道具可能尚未传递。您最好在mounted上进行检查。

由于浏览器控制台中的输出已更新，因此您在控制台中看到info的内容。如果现在要创建info的内容，请打印如下的JSON表示形式：JSON.stringify(this.info)

Answer 6

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

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

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

或像这样放松一下。如果需要加载状态，则应处理子组件内部的未定义数据，如果info未定义，则呈现加载状态，并在其他内容可用时呈现其他内容。