英文:
How to reference object prop from Vue3 template component
问题
我正在升级一个Vue2到Vue3的应用程序，并且在从父组件引用组件1的xxxxx属性时遇到了问题。
以下是代码：
<script>
export default {
name: 'component1',
props: {
xxxxx: {
type: Object,
default: () => ({})
}
}
}
</script>
在以下地方使用：
<li
v-for="(value, index) in xxxxxs"
:key="index">
<benefit-item :benefit="value" />
</li>
其中xxxxxs是从文件加载的对象集合：
xxxxxs() {
return this.$t('pages.home.benefits.items')
}
控制台显示的错误是：
无效的prop：prop“xxxxx”的类型检查失败。期望的是Object，但得到了值为“p”的String。
查看文档似乎代码是正确的。
我漏掉了什么？
谢谢！
英文:
I am updating a Vue2 to Vue3 application and I am facing a problem when referencing the xxxxx prop of the component1 from the parent one.
Here is the code
<script>
export default {
name: 'component1',
props: {
xxxxx: {
type: Object,
default: () => ({})
}
}
}
</script>
Used by
<li
v-for="(value, index) in xxxxxs"
:key="index">
<benefit-item :benefit=value />
</li>
where xxxxxs is an object collection loaded from a file
xxxxxs() {
return this.$t('pages.home.benefits.items')
}
The error shown in the console is
> Invalid prop: type check failed for prop "xxxxx". Expected Object, got
> String with value "p".
Looking at the documentation seems that the code is correct.
What I am missing?
Thanks
答案1
得分: 1
At first, you don't use here the xxxxx property.
<benefit-item :benefit=value />
At second, the value should be put in quotes or double quotes
<benefit-item :benefit='value' />
Assuming that your property is used correctly, the problem is most likely with your data.
Do the following in xxxxxs()
xxxxxs() {
let data = this.$t('pages.home.benefits.items');
console.log(data);
return data;
}
and check the data.
UPDATE
Your code is using t$ directive, which is most likely part of the Vue I18n plugin. If you have a problem with the translation, check the plugin setup. Since we don't see your setup, it's not possible to clarify the problem with the translation.
英文:
At first, you don't use here the xxxxx property.
<benefit-item :benefit=value />
At second, the value should be put in quotes or double quotes
<benefit-item :benefit='value' />
Assuming, that your property is used correctly, the problem is most likely with your data.
Do following in xxxxxs()
xxxxxs() {
let data = this.$t('pages.home.benefits.items');
console.log(data);
return data;
}
and check the data.
UPDATE
You code is using t$ directive, which is most likely part of the Vue I18n plugin. If you have problem with the translation, check the plugin setup. Since we don't see your setup, it's not possible to clarify the problem with the translation.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论