我的影像沒有顯示，我從標題中得到錯誤。這是我的代碼：
<theme-card
v-for="theme in themes"
:router-link="`/theme/${theme.slug}`"
:key="theme.id"
:name="theme.name"
:tags="theme.tags"
:id="theme.id"
:imgPath="theme.image.path"
></theme-card>
這是我的獲取請求
async getThemes() {
await axios
.get('api')
.then((response) => (this.themes = response.data.data))
},
然后在安裝：
async mounted() {
await this.getThemes()
}
在主題卡中，我收到 img 路徑作為道具
<img :src="`${imgPath}`" alt="未捕獲（承諾）型別錯誤：無法讀取 null 的屬性（讀取“路徑”）" height="80" />
一切都沒有影像，所以我的 get request 和 v-for 有效，只有 theme.image.path 不起作用，我不知道為什么，我使用 vue 和 ionic
uj5u.com熱心網友回復：
似乎theme.image在某些情況下沒有定義。要仍然顯示串列，只需使用：
<theme-card
v-for="theme in themes"
:router-link="`/theme/${theme.slug}`"
:key="theme.id"
:name="theme.name"
:tags="theme.tags"
:id="theme.id"
:image="theme.image"
></theme-card>
然后v-if有條件地顯示影像
<img v-if="image" :src="`${image.path}`" alt="未捕獲（承諾）型別錯誤：無法讀取 null 的屬性（讀取“路徑”）" height="80" />
uj5u.com熱心網友回復：
要僅顯示具有路徑的影像，您可以嘗試以下代碼
<theme-card
v-for="theme in themes"
:router-link="`/theme/${theme.slug}`"
:key="theme.id"
:name="theme.name"
:tags="theme.tags"
:id="theme.id"
:imgPath="theme.image? theme.image.path : ''"
></theme-card>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353954.html
上一篇：使用在模板內的方法中定義的變數