在console.log中变得未定义，但是vue控制台显示正确的值

Question

我是vue的新手，我无法控制台记录this.productVal.name，只是未定义，但是vue控制台扩展显示我正确地拥有了所有值。

export default {
  props: ['productVal'],
  created() {
    console.log(this.productVal.name);
  },
}

这就是我要使用子组件的方式

<child-product v-if="product" :product-val="product"></child-product>

谁能告诉我为什么它不起作用？

Answer 1

不确定导致信息不足的原因，但是如果它是子组件，请转到父组件，然后在子组件标签中添加v-if="productVal"。造成这种情况的原因可能是，当您创建此组件时，prop值尚未初始化，因此您无法读取name prop值的productVal，因此无法定义。

示例

您的父组件中可能有类似以下内容：

<template>
   <child-component :product-val="productVal">
</template>

因此将其更改为：

<template>
   <child-component v-if="productVal" :product-val="productVal">
</template>

它应该可以正常工作。

Answer 2

我没有注意到我正在使用一个对象在进入子组件时检查v-if，这不起作用。因此，我尝试了这种方式，它奏效了。 product.name代替product

<child-product v-if="product.name" :product-val="product"></child-product>

希望它在将来调试时对其他人有帮助。