Включить элемент один раз между v-для итерации - PullRequest
Новая
       15

Включить элемент один раз между v-для итерации

0 голосов
/ 02 июля 2019

В настоящее время у меня есть директива v-for, которая рендерит дюжину делений из массива. Этот массив содержит органические результаты 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-->
<!--...-->

1 Ответ

1 голос
/ 02 июля 2019

Трудно привести пример кода без специфики, но я бы добавил вычисляемое свойство , которое возвращает новый массив, объединяющий как результаты org, так и результаты news в один массив.

Затем вы можете выполнить итерацию по объединенному массиву и использовать v-if, чтобы выбрать, какой компонент отображать в зависимости от типа (org или news).

Примерно так: 

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