admin管理员组文章数量:1321805
How should we handle a v-for
bined with a v-if
in this exemple:
Here my data.json
:
[
{
image: 'foo.jpg'
},
{
image: 'foobar.jpg',
video: 'bar.mp4'
},
{
image: 'barfoo.jpg'
}
]
In my vue template, I'd like to render something like this:
<div v-for="(item, key, index) in data" : key="index">
<img :src="item.image">
<video v-if="!!item.video" :src="item.video"></video>
</div >
But as the documentation say, we should avoid v-if
with v-for
and instead use a puted value. But there I need to render the image even if the json entry doesn't have a video.
That's not a big deal, I've find a solution but I'd like to know the best way to handle this.
How should we handle a v-for
bined with a v-if
in this exemple:
Here my data.json
:
[
{
image: 'foo.jpg'
},
{
image: 'foobar.jpg',
video: 'bar.mp4'
},
{
image: 'barfoo.jpg'
}
]
In my vue template, I'd like to render something like this:
<div v-for="(item, key, index) in data" : key="index">
<img :src="item.image">
<video v-if="!!item.video" :src="item.video"></video>
</div >
But as the documentation say, we should avoid v-if
with v-for
and instead use a puted value. But there I need to render the image even if the json entry doesn't have a video.
That's not a big deal, I've find a solution but I'd like to know the best way to handle this.
Share Improve this question edited Jul 14, 2022 at 1:41 tony19 139k23 gold badges277 silver badges347 bronze badges asked Feb 4, 2019 at 14:46 Allan RaquinAllan Raquin 6138 silver badges26 bronze badges1 Answer
Reset to default 7I think that you are misunderstanding the documentation. In this instance, it makes sense to use both v-for
and v-if
because you are always going to render at least the <img>
and you might render the <video>
. The documentation is trying to show that you should pre-filter a list of items if the v-if
and v-for
are on the exact same element.
The example the docs are showing are trying to get you to cut a list that would show only only 2 of the 3 total elements down to just 2 elements and letting the puted prop tell you when there are more. Otherwise you have to iterate through the entire list every time you need to re-render.
Consider this difference:
// An array of 1000 items but only 1 has a video element
const data = [0...999];
data.push({
image: "some.jpg",
video: "some.mp4"
});
<!--
We always render 1000 items but only some will have video
-->
<div
v-for="(item, key, index) in data"
:key="index">
<img :src="item.image">
<video v-if="!!item.video" :src="item.video"></video>
</div>
<!--
We have to visit 1000 elements but
only 1 will actually end up rendering
-->
<div
v-if="!!item.video"
v-for="(item, key, index) in data"
:key="index">
<img :src="item.image">
<video :src="item.video"></video>
</div>
本文标签: javascriptCorrect way to handle vif with vfor in VueStack Overflow
版权声明:本文标题:javascript - Correct way to handle v-if with v-for in Vue - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742107030a2421066.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论