我想像這樣將一個字串傳遞給我的子組件，但以前我想列印它
這是我的父組件
{{left.leftA}} // here show me 8
<CustomCard
:left="left.leftA"
export default {
name: 'Parent',
data() {},
setup() {
onMounted(async () => {
const answer = await getData(name)
left.value = answer.response //{leftA:'A', leftB:'B'...}
})
在我的子組件中，我有這個宣告
export default {
name: 'CustomCard',
props: {
left: {
type: String,
required: true,
},
我收到此警告：
[Vue warn]: Invalid prop: type check failed for prop "left". Expected String with
value "undefined", got Undefined
它與我加載資料的方式有關嗎？可以使用 onMounted 嗎？
uj5u.com熱心網友回復：
發生這種情況是因為 value 的初始值為 null。因此，在初始渲染時它會拋出警告，但在另一個渲染時它具有正確的道具型別（字串）并正確渲染。
您有 3 個選擇。允許 '' 作為道具上的選項，或者在您擁有正確的資料或使用計算屬性之前不要渲染組件。
選項1
{{left.leftA}} // here show me 8
<CustomCard
:left="left.leftA ? left.leftA : ''"
選項 2
{{left.leftA}} // here show me 8
<CustomCard v-if="loaded"
:left="left.leftA"
and in onMounted(}
onMounted(async () => {
const answer = await getData(name)
left.value = answer.response //{leftA:'A', leftB:'B'...}
// Set the loaded flag as true here. Also make sure its set as false inside the setup()
})
選項 3
{{left.leftA}} // here show me 8
<CustomCard
:left="sendVal"
In computed....
computed: {
sendVal() {
if(left && left.left1) return left.left1;
return '';
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366323.html
標籤：Vue.js
上一篇：Vuejs：如何在兩個組件中使用mixin函式？按執行錯誤
下一篇：VueJs只間歇性地顯示資料