vue.js - Prop 在开发工具中显示,但在使用时显示未定义

标签 vue.js vuejs2 prop

我将一个简单的 ID 传递给子组件,但出现未定义的控制台日志错误,并且无法使用该属性

我把这里的 Prop 传给 child

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

然后在这里的 child 身上拾取它

props: ["userId"]

然后我尝试像这样控制台记录 Prop

console.log(this.userId);

正如您从图像中看到的,该 Prop 显示在 Devtools 中 Prop is showing here

错误如下

[Vue warn]:无效的 Prop : Prop “userId”的类型检查失败。预期的字符串值为“未定义”,结果为未定义

最佳答案

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

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

vue编译可以将模板上的camelcase props更改为带连字符的小写。

您可以查看 vue 文档:https://v2.vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

关于vue.js - Prop 在开发工具中显示,但在使用时显示未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56111217/

相关文章:

javascript - VueJS 中的模型 URL 参数

javascript - 如何在 VueJS 中将值从一个子组件传递到另一个子组件?

javascript - 使用 jQuery 在 3 秒内使输入文本不可编辑,然后再次可编辑

javascript - 使用 jQuery 将图像链接更改为 "#"

jquery - 为什么 jQuery 1.9+ attr() 方法没有被弃用?

vue.js - 从外部文件导入 Vuex 实例时无法访问 $store

javascript - Vue.js 更改按键后不响应鼠标事件

html - Vue - 输入多个复选框

javascript - Vue.js 从 html 初始化对象属性

javascript - Vue 中单个 "list"组件与重复的单个组件