无法读取未定义的 vue 的属性"0"

Question

我有一个问题与数组工作，到目前为止，我能够在视图中加载数据。我现在的问题是搜索。如果我添加数组，我无法读取未定义的属性'0'。但是当这一行不是img:src="'images2/'+product.images[0].filename"包括可以获取值。

这是代码:

<div v-for="product in Products.data" :key="product.id" class="p-2">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{product.title}}</h5>
<div><img :src="'images2/'+product.images[0].filename" width="200" height="200"></div>
<div class="itemv p-2"> Location:{{product.location}} </div>
<a class="btn btn-primary btn-sm" :href="'/products/'+product.id">View</a>
</div>
</div>
</div>

属性

export default {
data() {
return {
id: '',
Products: {
images: [],
},
};
},
};

和我的搜索功能

created() {
Fire.$on('searching', () => {
let query = this.$parent.search;
axios.get('/productsearch/?q=' + query)
.then((data) => {
this.Products = data.data
})
.catch(() => {
})
})
this.loadProductData();
}

Answer 1

我想你只是忘了加上"v-for"声明。

<div>
<img v-for="{ id, images } of Products.data"
:key="`product${id}`"
:src="'images2/' + images[0].filename"
width="200"
height="200"
>
</div>

如果Products.images是空的Array，上述代码将不呈现。

在获取数据后渲染。