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>

在v-for迭代之间插入元素一次

1 个答案: