在Vue中使用v-for处理v-if的正确方法 [英] Correct way to handle v-if with v-for in Vue

问题描述

在这个例子中，我们应该如何处理 v-for 和 v-if ：

这里我的 data.json ：

  [
 {
 image：'foo.jpg'
}，
 {
 image：'foobar.jpg'，
 video ：'bar.mp4'
}，
 {
 image：'barfoo.jpg'
} 
] 
  

在我的vue模板中，我想渲染这样的内容：

数据：key =index>中的< div v-for =（item，key，index） 
< img：src =item.image> 
< video v-if =!! item.video：src =item.video>< / video> 
< / div> 
  

但是文档说，我们应该避免 v-if 使用 v-for 而改为使用计算值。但即使json条目没有视频，我也需要渲染图像。

这不是什么大问题，我找到了一个解决方案，但我'我想知道解决这个问题的最佳方法。

解决方案

我认为你误解了这些文档。在这种情况下，使用 v-for 和 v-if 是有意义的，因为你总是要至少渲染< img> ，您可以渲染< video> 。该文档试图表明，如果 v-if 和 v-for 是完全相同的元素。

文档显示的示例试图让您剪切一个列表，该列表只显示3个总元素中的2个只有2个元素，并让计算出的道具告诉你什么时候有更多。否则，每次需要重新渲染时都必须遍历整个列表。

考虑这种差异：

< pre class =lang-js prettyprint-override> // 1000个项目的数组，但只有1个项目有视频元素
const data = [0 ... 999];

data.push（{
image：some.jpg，
video：some.mp4
}）;


 <！ - 
我们总是呈现1000个项目，但只有一些会有视频
  - >数据
：key =index>中的
< div 
 v-for =（item，key，index） 
< img：src =item.image> 
< video v-if =!! item.video：src =item.video>< / video> 
< / div> 
 
 
<！ -  
我们必须访问1000个元素，但
只有1个实际上最终会渲染
  - > 
< div 
 v-if =!! item.video
 v-for =（item，key，index）数据
：key =index > 
< img：src =item.image> 
< video：src =item.video>< / video> 
< / div> 
  

How should we handle a v-for combined 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 computed 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.

解决方案

I 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 computed 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>

这篇关于在Vue中使用v-for处理v-if的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！