v-for рендер или не рендеринг <div>на {x} итерации - PullRequest
Новая
       20

v-for рендер или не рендеринг <div>на {x} итерации

0 голосов
/ 09 марта 2019

Я нигде не нашел решения своего вопроса и не могу понять.У меня есть divs, подобные этому 

<div class="columns">
  <div class="column">
   {looping content here}
  </div>
</div

Данные примерно такие: 

{
   title: 'blabla'
   body: 'blabla'
   msg: 'blabla"
}

Для адаптивных целей мне нужно 3 столбца максимум рядом, а затем запустить другой контейнер столбцов, который будет складывать столбцыпод.Итак, 3 столбца div внутри контейнера столбцов, а затем создайте еще один столбец div с 3 столбцами div внутри и продолжайте, пока массив не станет пустым.

Я пробовал свойство computed count, но не знаю, как его повторить внутри v-за.Также пробовал v-if, но это не сработало, как планировалось: (

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

Ответы [ 2 ]

0 голосов
/ 09 марта 2019

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

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

new Vue({
  el: '#app',
  data () {
    return {
      columns: [
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        }
      ]
    }
  }
})
.columns {
  display: flex;
  flex-wrap: wrap;
}

.column {
  box-sizing: border-box;
  padding: 1em;
  width: 33.3%;
}

/* on devices smaller than 576px, stack columns */
@media (max-width: 576px) {
  .column {
    width: 100%;
  }
}
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <div class="columns">
    <div v-for="(column, index) in columns" class="column" :key="index">
      <h2>{{ column.title }}</h2>
      <p>{{ column.body }}</p>
      <strong>{{ column.msg }}</strong>
    </div>
  </div>
</div>
0 голосов
/ 09 марта 2019

Возможно вложение v-for циклов, если данные правильно отформатированы.
Например, массив (для первого v-for) объектов (для второго цикла): 

new Vue({
  el: "#app",
  data() {
    return {
      items: [
        {
          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
        },
        {
          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'
        }
      ]
    }
  }
})
.columns {
  align-items: center;
  display: flex;
  height: 40px;
  justify-content: space-around;
  width: 50%;
}
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <div class="columns" v-for="item in items">
    <div class="column" v-for="(value, key) in item">
      <div>{{ value }}</div>
    </div>
  </div>
</div>
...