在 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 returns 一个新数组，将 org 结果和新闻结果组合到一个数组中。

然后您可以遍历组合数组并使用 v-if 到 select 根据类型（组织或新闻）呈现哪个组件。

像这样：

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

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

Include element once in between v-for iteration

javascript

vue.js

v-for