道具在开发工具中显示，但在使用时显示未定义

Question

我正在将一个简单的ID传递给子组件，但出现未定义的控制台日志错误，无法使用道具

我将道具传递给孩子

<transactions v-show="active_tab == 2" :userId="affiliate.user_id"></transactions>

然后在这里的孩子中被带走

props: ["userId"]

然后我就这样尝试控制台登录道具

console.log(this.userId);

从图像中可以看到，道具正在Devtools中显示

错误如下

[Vue警告]：道具无效：道具“ userId”的类型检查失败。预期的字符串，其值为“ undefined”，未定义

Answer 1

尝试像这样使用调用模板：

<transactions v-if="active_tab == 2" :user-id="affiliate.user_id"></transactions>

vue编译可以使用连字符将模板上的驼峰式道具更改为小写字母。

您可以查看有关以下内容的vue文档：https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

Answer 2

所以似乎在页面加载后就声明了prop，所以我使用了Watch来等待更改，然后运行该方法

如此

watch: {
    user_id() {
      console.log(this.user_id);
      this.fetch_transactions_data();
    }
  }