javascript - 在 v-for 迭代之间包含一次元素

Question

目前，我有一个 v-for 指令，可以从数组中渲染十几个 div。该数组保存来自开源搜索引擎 API 的有机结果。所有这些有机结果都具有相同的外观，因此需要迭代。另一方面，我有一个 div 保存新闻结果。目前，包含该结果的唯一方法是在呈现有机结果之后并在列表末尾。有没有办法将此新闻结果放在有机结果之间的任何位置，而不必拆分有机结果数组？

请告诉我这在框架的功能范围内是否可行。

现状

<!--org result-->
<!--org result-->
<!--org result-->
<!--org result-->
<!--org result-->
<!--org result-->
<!--org result-->
<!--...-->
<!--news result-->

我需要什么

<!--org result-->
<!--org result-->
<!--news result-->
<!--org result-->
<!--org result-->
<!--org result-->
<!--org result-->
<!--org result-->
<!--...-->

Answer 1

如果没有具体细节，很难给出代码示例，但我会添加 computed property返回一个新数组，将组织结果和新闻结果合并到一个数组中。

然后，您可以迭代组合数组并使用 v-if 根据类型(组织或新闻)选择要呈现的组件。

类似这样的事情:

<template>
  <ul>
    <!-- NOTE: This assumes isOrg and id - change as needed -->
    <li v-for="item in orgAndNews" :key="item.id">
      <span v-if="item.isOrg">org item: {{ item.title }}</span>
      <span v-else>news item: {{ item.title }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    orgResults: {
      type: Array,
      required: true,
    },
    newsResult: {
      type: Object,
      required: true,
    },
  },
  computed: {
    orgAndNews() {
      return [...this.orgResults.slice(0, 2), this.newsResult, ...this.orgResults.slice(2)];
    },
  },
};
</script>