Заказ при использовании v-for
При использовании v-for для перебора массива следующим образом:
<ul id = "example-1">
<li v-for = "item in items">
{{ item.message }}
</li>
</ul>
Элементы расположены друг под другом:
- Элемент списка с индексом 1
- Элемент списка с индексом 2
- Элемент списка с индексом ...
- Элемент списка с индексом n
Есть ли способ добавить элемент из текущей итерации над последним элементом?
- Элемент списка с индексом n
- Элемент списка с индексом ...
- Элемент списка с индексом 2
- Элемент списка с индексом 1
Большое спасибо!
спасибо за Ваш ответ. Я уже думал об этом. Проблема в том, что во время выполнения массив изменяется. Так что это не вариант. Также я попробовал unshift вместо push. Но все же элемент отображается под элементами.
Сортируйте свои предметы, когда вы их загружаете. ajaxcall (). затем ((res) => this.items = res.data.sort ('...'))
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать второй массив для «запаса» ваших перевернутых данных и использовать unshift (вместо push), чтобы помещать каждый новый элемент в начало «перевернутого» массива:
new Vue({
el: "#app",
data() {
return {
items: ["item 1", "item 2", "item 3"],
reversedItems: []
}
},
mounted() {
this.reversedItems = this.items.reverse()
},
methods: {
loadItem(){
let i = this.items.length
this.items.unshift("item " + (i + 1))
}
}
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id = "app">
<ul>
<li v-for = "item in reversedItems">{{ item }}</li>
</ul>
<button @click = "loadItem">Load item</button>
</div>За исключением того, что… когда вы выполняете items.unshift("item4"), массив items должен стать ["item4", "item1", "item2", "item3"], следовательно, отображение должно быть сверху вниз: item3, item2, item1, item4, тогда как ваш код делает: item4, item3, item2, item1.
Простое решение - использовать вычисленное свойство вашего items, который переворачивает массив (без изменения его на месте, если он используется как prop, или для того, чтобы сохранить его первоначальный порядок, как было заявлено): reversedItems() { return this.items.slice().reverse(); }
Пример кода:
new Vue({
el: "#app",
data() {
return {
items: ["item 1", "item 2", "item 3"],
}
},
computed: {
reversedItems() {
// Reverse a COPY of the array to avoid messing with its initial order.
return this.items.slice().reverse();
},
},
methods: {
loadItem() {
const i = this.items.length;
// Append to the end of the array in a simple approach,
// and let the computed property re-order the array.
this.items.push("item " + (i + 1));
},
},
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id = "app">
<ul>
<li v-for = "item in reversedItems">{{ item }}</li>
</ul>
<button @click = "loadItem">Load item</button>
</div>Обратите внимание, что Vue исправляет методы массива (например, reverse) при применении к реактивным данным (например, переменным, которые вы объявляете в data), так что результат также является реактивным. Поэтому данные reversedItems в ответе @sovalina становятся реактивными на модификации items, тогда как при монтировании компонента они назначаются только один раз.
если все, что вы хотите изменить порядок массива независимо от того, просто используйте метод .reverse () массива [1,2,3] .reverse () => [3,2,1]