Условная оболочка VueJS внутри v-для

#loops #vue.js #conditional-statements #wrapper #v-for

#циклы #vue.js #условные операторы #оболочка #v-для

Вопрос:

Есть ли какой-либо способ создать условную оболочку в цикле v-for?

Итак, у меня есть что-то вроде этого

 <template>
  <div v-for="(item in items)">
     <span v-if="item.date==newDate">Header</span>
     <div>{{item.text}}</div>
  </div>
</template>

Но мне нужно что-то вроде:
Не уверен, что смогу описать это в коде. но мне нужно, чтобы элементы были в оболочке всякий раз, когда появляется новое, например

 <section>
  <span> New v-if Span</span>
  <div> item 1</div>
  <div> item 2</div>
  <div> item 3</div>
</section>
<section>
  <span> New v-if Span</span>
  <div> item 4</div>
  <div> item 5</div>
  <div> item 6</div>
</section>

Я думаю, я мог бы уточнить свой массив и проверить наличие групп, прежде чем у меня будет v-for, и выполнить v-for в v-for
Но, может быть, есть более крутой способ сделать это в vue, о котором я не знаю?

1. как это items выглядит?

2. массив объектов

3. пожалуйста, поделитесь фрагментом этого массива

4. Я не совсем уверен, почему это имеет значение, это очень большой и длинный объект, но это также может быть [{date: 2020-02-01, label: "item1"},{date: 2020-02-20, label: "item2}] , и вопрос все еще актуален

Ответ №1:

Вы можете попробовать что-то подобное здесь,

 new Vue({
  el: "#app",
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <section v-for="jump in Math.ceil(items.length/3)">
    <span>New v-if Span</span>
    <div v-for="item in items.slice(3*(jump-1), 3*(jump-1) 3)">item {{item}}</div>
  </section>
</div>

Развернуть фрагмент

1. Да, но это в основном означает, что сначала мне нужно будет узнать, сколько групп и элементов в группе у меня есть в первую очередь. Но похоже, что наличие 2x циклов v-for является единственным вариантом

2. Да, вам придется использовать 2 цикла для этой HTML-структуры (1 для групп, другой для каждого элемента группы). Также вам не нужно знать, сколько групп, вам нужно только знать, сколько элементов в каждой группе.