Vue.js v-for и изменение data

302

14 февраля 2018, 13:09

Здравствуйте. Есть такой пример:

var example1 = new Vue({ 
  el: '#example-1', 
  data: { 
    items: [ 
      { message: 'Foo' }, 
      { message: 'Bar' } 
    ] 
  } 
})

<ul id="example-1"> 
  <li v-for="item in items"> 
    {{ item.message }} 
  </li> 
</ul>

Вопрос мой заключается в следующем: Можно ли каким то образом во время перебора елементов менять св-ва каждого последующего елемента? Тоесть если у меня будет 10 елементов 'li' - могу ли я каждому последующему например увеличивать маргин на 5 пикселей и т.п.? (если да - как этого можно достичь.) + можно ли во время перебора(или как то иначе) обращаться к предыдущему елементу li и смотреть какие у него параметры? Хотелось бы понять какой в данном случае подход является наиболее приемлемым.

Answer 1

Исходный список при таком переборе вы изменить не можете. Но вы можете изменить вывод этого списка.

Например, вы можете использовать index, при обходе элементов списка.

В примере ниже, каждый следующий элемент получает margin-top на 5px больше предыдущего.

На счет обращения к предыдущему элементу. При переборе списка таким образом (с помощью v-for) вы этого сделать не можете. Вы можете сделать это в js коде. Воспользуйтесь функцией reduce.

Метод «arr.reduce(callback[, initialValue])» используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.

Подробнее про нее прочитайте тут.

var example1 = new Vue({ 
  el: '#example-1', 
  data: { 
    items: [ 
      { message: 'Foo' }, 
      { message: 'Bar' } 
    ] 
  } 
})

    <ul id="example-1"> 
  <li v-for="(item, index) in items" :key="item.id" :style="{ marginTop: 5 * index + 'px' }"> 
        {{ item.message }} 
  </li> 
</ul>