我是新手，負責一個使用 Vuejs 的專案。
這是一個使用名為 DashboardCard 的組件的頁面，每個 DardboardCard 都傳遞了 2 個 props 是來自頁面的 val 和 icon，也就是父組件
我在 DashboardCard 組件又名子組件中宣告了道具，但所有道具的值都不能傳遞和分配
我現在遇到了這個錯誤
更新
這里是Vuejs devtool日志，你可以看到props被傳遞
uj5u.com熱心網友回復：
原因是，甚至在 props 持有價值之前，你就試圖訪問它。所以我建議有兩種方法
從父組件（Dashboard.vue）：
嘗試通過它像:icon="'@/assets/sale.png'"和:val="'$700'"
并在子組件（DashboardCard.vue）中
方法一：
宣告兩個資料變數并使用 watch 處理程式使用 prop 值設定它們
export default {
components: {DatePicker},
props: {
icon: {
type: String,
default: ''
},
val: {
type: String,
default: ''
}
},
data() {
return {
iconPath: '',
amtVal: ''
};
},
watch: {
icon(newVal, oldVal) {
this.iconPath = newVal;
},
val(newVal, oldVal) {
this.amtVal = newVal;
}
}
并在模板中使用您的本地資料變數，例如
<span>{{amtVal}}</span>
and
<img :src="require(iconPath)" alt="icon" />
方法 2：
使用計算屬性
export default {
components: {DatePicker},
props: {
icon: {
type: String,
default: ''
},
val: {
type: String,
default: ''
}
},
computed: {
getIcon() {
return this.icon;
},
getVal() {
return this.val;
}
}
并在模板中
<span>{{getVal}}</span>
and
<img :src="require(getIcon)" alt="icon" />
uj5u.com熱心網友回復：
您缺少組件中的script結束標記</script>，DashboardCard因此 Vue 無法找出組件屬性。起初，我認為在我嘗試沙箱之前還有更多代碼。
請注意，在 Vue devtools 擴展中，一個 prop 應該位于props選項卡下，這不是你的情況。
我建議您使用某種片段來避免這種煩人的拼寫錯誤。對我來說，我使用Vetur. 它還有助于語法突出顯示，非常方便的擴展。
https://marketplace.visualstudio.com/items?itemName=octref.vetur
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359411.html
標籤：javascript Vue.js 参数传递 vue-devtools
上一篇：如何從Vue中的陣列中洗掉專案