在Vue中使用v-for处理v-if的正确方法

Question

在此示例中，如何处理/{empId}/class: get: tags: - "School" summary: "Some Summary" description: "Some description" operationId: "getDataForEmp" produces: - "application/json;charset=UTF-8" parameters: - name: "empId" in: "path" description: "The emp id for which record is to be fetched." required: true type: "string" responses: 200: description: "Data retrieved successfully." schema: $ref: "#/definitions/MyResponse" headers: Cache-Control: default: "public, max-age=43200" 401: description: "You are not authorised to make this change." 403: description: "Accessing the resource you were trying to reach is forbidden." 404: description: "The resource you were trying to reach is not found." 和v-for的组合：

这是我的v-if：

data.json

在我的Vue模板中，我想渲染如下内容：

[
  {
    image: 'foo.jpg'
  },
  {
    image: 'foobar.jpg',
    video: 'bar.mp4'
  },
  {
    image: 'barfoo.jpg'
  }
]

但是作为documentation say，我们应该避免将<div v-for="(item, key, index) in data" : key="index"> <img :src="item.image"> <video v-if="!!item.video" :src="item.video"></video> </div > 与v-if一起使用，而应使用计算值。但是，即使json条目没有视频，我也需要渲染图像。

这没什么大不了的，我已经找到了解决方案，但我想知道处理此问题的最佳方法。

Answer 1

我认为您对文档有误解。在这种情况下，同时使用v-for和v-if是有意义的，因为您将始终至少渲染<img>，并且可能会渲染{{ 1}}。该文档试图证明如果<video>和v-if完全在同一元素上，则应预先过滤项目列表。

文档显示的示例试图使您削减一个列表，该列表将仅显示3个元素中的2个，仅显示2个元素，并让计算的prop告诉您何时还有更多。否则，您每次需要重新渲染时都必须遍历整个列表。

考虑这种差异：

v-for

// An array of 1000 items but only 1 has a video element
const data = [0...999];

data.push({
  image: "some.jpg",
  video: "some.mp4"
});