Vuejs добавляет элемент сверху вниз
У меня есть код:
<comment-form @created = "add"></comment-form>
<div v-for = "(comment, index) in items" :key = "comment.id">
<comment :data = "comment"></comment>
</div>
В миксине у меня есть метод, когда событие created, я обрабатываю этот метод:
methods: {
add(item) {
this.items.push(item);
this.$emit('added');
}
}
Когда я добавляю новый комментарий, этот комментарий появляется ниже. Как я могу изменить и при добавлении нового комментария показать его среди всех комментариев?
Я попробовал:
v-for = "(comment, index) in items.slice().reverse()"
Но не работает, комментарии все равно идут сверху вниз.
@SamiHult, когда я добавляю комментарий на страницу, он добавляется нормально, когда я снова добавляю комментарий, мой новый комментарий не отображается вверху, он отображается внизу, после старого комментария. Как я могу изменить это? И сделайте новый комментарий при показе перед старым комментарием.
Есть две альтернативы: вы либо делаете, как вы предложили, и показываете элементы в обратном порядке, либо добавляете новые элементы в начало списка: this.items.unshift(item);. Почему ваш пример кода не работает должным образом, нельзя сказать, не показывая больше кода.
@SamiHult unshift работает!!! Большое спасибо!
@SamiHult должен написать это как ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот обновленный код:
methods: {
add(item) {
this.items. unshift(item);
this.$emit('added');
}
}
В основном push() добавит элемент в конец array.
unshift() добавит элемент в переднюю (в 0-м индексе) позицию.
splice('insertAtIndex', 0, 'stringToBeInserted') будет использоваться для добавления элемента по определенному индексу массива.
Ваш код в посте выглядит нормально, поэтому я предполагаю, что проблема в другом. Можете ли вы раскрыть больше? Однако вы можете захотеть выполнить копирование и реверсирование в вычисляемом свойстве.