如何使用带有数组和 v-for 的 Vuejs 条件?
How to use condition with Vuejs with array and v-for?
我有一个用 Axios 加载的数组文件,问题是这个数组有图像和视频,我无法更改它,我想要只有图像的数组,有人可以帮忙吗做到这一点,谢谢~
{
"data": [
{
"id": "01",
"media_type": "IMAGE",
"media_url": "https://...",
},
{
"id": "02",
"media_type": "VIDEO",
"media_url": "https://...",
},
{
"id": "02",
"media_type": "IMAGE",
"media_url": "https://...",
},
...
]
}
<div class="xx" v-for="event in events.data.slice(0, 6)" v-if="event.media_type == 'IMAGE'">
<img :src="event.media_url" :alt="event.caption">
</div>
data() {
return {
insta: "gram",
events: []
}
},
created() {
axios
.get('https:...')
.then(response => {
this.events = response.data
})
.catch(error => {
console.log('There is an error: ' + error.response)
})
},
你真的不应该混合使用 v-for
和 v-if
指令,因为它们令人困惑,在 Vue2 and Vue3, and most importantly, they have different precedence in Vue2 vs Vue3.
中官方不鼓励使用它们
如果你想处理过滤后的数组(在这种情况下,你只需要图像),那么创建一个基于原始数据的计算道具。从您的代码中不清楚您是否要先执行哪个操作:
- 获取前 6 个条目
- 仅获取图像
假设您想要获取所有图像,然后 return 前 6 张图像,那么这将起作用:
computed: {
filteredEvents() {
return this.events.data.filter(d => d.media_type === 'IMAGE').slice(0,6);
}
}
如果您想获取任何 6 个第一个条目,然后按图像过滤它们,则只需切换链接即可:
computed: {
filteredEvents() {
return this.events.data.slice(0,6).filter(d => d.media_type === 'IMAGE');
}
}
然后你可以在你的模板中使用这个:
<div class="xx" v-for="event in filteredEvents">
<img :src="event.media_url" :alt="event.caption">
</div>
我有一个用 Axios 加载的数组文件,问题是这个数组有图像和视频,我无法更改它,我想要只有图像的数组,有人可以帮忙吗做到这一点,谢谢~
{
"data": [
{
"id": "01",
"media_type": "IMAGE",
"media_url": "https://...",
},
{
"id": "02",
"media_type": "VIDEO",
"media_url": "https://...",
},
{
"id": "02",
"media_type": "IMAGE",
"media_url": "https://...",
},
...
]
}
<div class="xx" v-for="event in events.data.slice(0, 6)" v-if="event.media_type == 'IMAGE'">
<img :src="event.media_url" :alt="event.caption">
</div>
data() {
return {
insta: "gram",
events: []
}
},
created() {
axios
.get('https:...')
.then(response => {
this.events = response.data
})
.catch(error => {
console.log('There is an error: ' + error.response)
})
},
你真的不应该混合使用 v-for
和 v-if
指令,因为它们令人困惑,在 Vue2 and Vue3, and most importantly, they have different precedence in Vue2 vs Vue3.
如果你想处理过滤后的数组(在这种情况下,你只需要图像),那么创建一个基于原始数据的计算道具。从您的代码中不清楚您是否要先执行哪个操作:
- 获取前 6 个条目
- 仅获取图像
假设您想要获取所有图像,然后 return 前 6 张图像,那么这将起作用:
computed: {
filteredEvents() {
return this.events.data.filter(d => d.media_type === 'IMAGE').slice(0,6);
}
}
如果您想获取任何 6 个第一个条目,然后按图像过滤它们,则只需切换链接即可:
computed: {
filteredEvents() {
return this.events.data.slice(0,6).filter(d => d.media_type === 'IMAGE');
}
}
然后你可以在你的模板中使用这个:
<div class="xx" v-for="event in filteredEvents">
<img :src="event.media_url" :alt="event.caption">
</div>