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

Question

我是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]时,控制台显示未定义.我无法访问数组的元素.有人可以帮帮我吗？谢谢!

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>

为什么？因为:是v-bind:查找 javascript 对象的简写形式，因为:info="info"等于:info=info您实际想要使用的:info="'info'"，因为这等于：info='info'。

您可以在 Vue.js 的 Props Doc 部分详细了解其工作原理：https://v2.vuejs.org/v2/guide/components-props.html

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