Зацикливание другого div с использованием V-for в vue js

Question

кто-то может помочь мне зацикливаться с помощью v-for, чтобы вывести макет следующим образом.

введите описание изображения здесь

как я могу использовать v-for в этомдело?

Answer 1

Похоже, вы вложили немного логики в свой шаблон и используете три экземпляра цикла.

<div id="app">
  <h2>Product:</h2>
  <div class="row" v-for="(sparator, index) in products" v-if="index % 5 == 0">
    <div class="col col-6" v-for="(product, key) in products" v-if="index <= key && key < (index + 2)">
      <label>{{ product.text }}</label>
    </div>

    <div class="col col-4" v-for="(product, key) in products" v-if="(index + 2) <= key && key < (index + 5)">
      <label>{{ product.text }}</label>
    </div>
  </div>
</div>

Вы можете сократить его до двух циклов, где класс вычисляется на основе ключа

<div id="app">
  <h2>Product:</h2>
  <div class="row" v-for="(sparator, index) in products" v-if="index % 5 == 0">
    <div class="col" :class="['col-' + ((key % 5 >= 2)?'4':'6')] v-for="(product, key) in products" v-if="index <= key && key < (index + 5)">
      <label>{{ product.text }}</label>
    </div>
  </div>
</div>

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

, поскольку вы используете массив, вы можете использовать только индекс в своем вложенном цикле

<div id="app">
  <h2>Product:</h2>
  <div class="row" v-for="(sparator, index) in products" v-if="index % 5 == 0">
    <div class="col" :class="['col-' + ((key % 5 >= 2)?'4':'6')]" v-for="(product, key) in 5" v-if="products[index+key]">
      <label>{{ products[index+key].text }}</label>
    </div>
  </div>
</div>

https://jsfiddle.net/ystxow02/

Но все же, это (IMO) проблема, потому что ваш шаблон не должен быть таким сложным.Идея в том, что шаблон отображает макет, а не вычисляет его.Поэтому я бы использовал computed для создания данных таким образом, чтобы их было проще всего использовать в шаблоне.

js:

  computed: {
    productLayout() {
        let s = [];
      this.products.forEach((p, i) => {
        let s_index = Math.floor(i / 5) * 2 + ((i % 5 >= 2)? 1 : 0);
        if (s[s_index] === undefined) {
            s[s_index] = {class:"row", products:[]};
        }
        let className = i%5 >= 2 ? 'col-4' : 'col-6';
        s[s_index].products.push({class:className, ...p})
      })
      console.log(s)
      return s;
    }
  }

template:

<div id="app">
  <h2>Product:</h2>
  <div class="row" v-for="(s, i) in productLayout">
    <div class="col" :class="product.class" v-for="(product, k) in s.products">
      <label>{{ product.text }}</label>
    </div>
  </div>
</div>

https://jsfiddle.net/5pz2urn0/