Как изменить порядок массива, используя v-for и фильтр orderBy в Vue JS?
Я определяю константу в jsp прямо в начале:
<%final String URI = "http://www.example.com/";%>
Я включаю основной теглиб в свой JSP:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
Затем я делаю константа, доступная для EL посредством следующего утверждения:
<c:set var="URI" value="<%=URI%>"></c:set>
Теперь я могу использовать его позже. Здесь пример, где значение просто написано как комментарий HTML для целей отладки:
<!-- ${URI} -->
С вашим постоянным классом вы можете просто импортировать свой класс и назначить константы локальным переменным. Я знаю, что мой ответ - это своего рода быстрый взлом, но вопрос также возникает, когда нужно определить константы непосредственно в JSP.
5 ответов
Примечание: Приведенное ниже работает в Vue 1, но в Vue 2 фильтры устарели, и вы увидите: «Свойство или метод« reverse »не определены в экземпляре, но на них ссылаются во время рендеринга» «. См. ответ tdom_93 для vue2.
Вы можете создать собственный фильтр для возврата элементов в обратном порядке:
Vue.filter('reverse', function(value) {
// slice to make a copy of array, then reverse the copy
return value.slice().reverse();
});
Затем использовать его в выражении v-for:
<ol>
<li v-for="item in items | reverse" track-by="id">
Простое и краткое решение:
<li v-for="item in items.slice().reverse()">
//do something with item ...
</li>
Обновление для Vue2
Я хочу показать некоторые способы работы с данными без использования фильтров, поскольку они устарели в Vue2:
внутри вычисляемого свойства
Используйте вычисляемые свойства вместо фильтров, что гораздо лучше, поскольку вы можете использовать эти данные везде в компоненте, а не только в шаблоне: jsFiddle
computed: {
reverseItems() {
return this.items.slice().reverse();
}
}
внутри свойства геттера Vuex
Если вы используете Vuex и храните свои данные в объекте store.state. Лучший способ выполнить какое-либо преобразование с данными, хранящимися в состоянии, - это сделать это в объекте getters (например, , фильтруя список элементов и считая их, в обратном порядке и т. Д. )
getters: {
reverseItems: state => {
return state.items.slice().reverse();
}
}
и извлечение состояния из геттеров в вычисляемом свойстве компонента:
computed: {
showDialogCancelMatch() {
return this.$store.state.reverseItems;
}
}
Директива v-for не поддерживает итерацию в обратном направлении, поэтому, если вы хотите упорядочить по самым новым, вам нужно будет добавить другое поле, чтобы указать, когда был добавлен элемент, или изменить id, чтобы увеличивать каждый раз элемент добавлен.
Затем, с field, являющимся полем, указывающим добавленный порядок:
<li v-for="item in items | orderBy 'field' -1" track-by="id">
Для моего варианта использования (который, по общему признанию, очевидно отличается от OP ...) я хотел иметь индексы массива в обратном порядке в v-for «петле».
Мое решение состояло в том, чтобы создать метод приложения Vue reverseRange(length), который возвращает массив целых чисел от длины 1 до 0. Затем я использовал это в своей директиве v-for и просто назвал мои элементы массива как myArray[index]. каждый раз, когда мне это было нужно.
Таким образом, индексы были в обратном порядке, и я смог затем использовать их для доступа к элементам массива.
Я надеюсь, что это поможет тому, кто попал на эту страницу с этим тонким нюансом в своих требованиях, как я.