javascript — сортировка данных API по номерам (0-9) в VueJS

Сортировка моих данных API численно (0-9) в VueJS

У меня есть данные, сопоставленные с API (см. Ниже), который я достигаю нормально, но я пытаюсь отсортировать их численно (0-9). Мне тяжело делать это с Вью. Если бы у меня были статические данные в data(){...} , я могу сделать это несколькими способами. Но не из API, потому что по какой-то причине я не могу указать на API всякий раз, когда пытаюсь указать на него из функции в моих методах. Я понятия не имею, что происходит, и я надеюсь, что у вас, ребята, есть какое-то направление.

Шаблон — из-за вложенности API, я также вкладываю циклы. (возможно, есть лучший способ сделать это. У меня все уши). allBatches мой allBatches . Я обслуживаю API через моего менеджера штата (Vuex)

 {amp}lt;div{amp}gt; {amp}lt;div v-for="batches in allBatches" :key="batches.id"{amp}gt; {amp}lt;div v-for="dispatchstation in batches.dispatchstation" :key="dispatchstation.id"{amp}gt; {amp}lt;div v-for="apps in dispatchstation.applications" :key="apps.id"{amp}gt; {amp}lt;div{amp}gt;{{apps}}{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Структура данных в API — я намеренно пропустил несвязанные данные. Есть другие слои между ними. Но это показывает путь, по которому я иду и иду к нему.

 "batches": [ { "dispatchstation": [ { "applications": [ "384752387450", "456345634563", "345634563456", "567845362334", "567456745677", "456734562457", "789676545365", "456456445556", "224563456345", "456878656467", "053452345344", "045440545455", "045454545204", "000014546546", "032116876846", "546521302151", "035649874877", "986765151231", "653468463854", "653853121324", "000145456555" ] } ] } 

],

Я пытался сделать это с помощью _.orderBy с помощью _.orderBy и использовать его как трубу. Не повезло. И я тоже попробовал это:

 data() { return { sortAsc: true, sortApps: "" // see explanation }; }, computed: { ...mapGetters(["allBatches"]), sortedData() { let result = this.sortApps; let ascDesc = this.sortAsc ? 1 : -1; return result.sort( (a, b) ={amp}gt; ascDesc * a.applications.localeCompare(b.applications) ); } }, 

Я использовал (попробовал) этот метод, предоставив sortApps критерии цикла dispatchstations.applications и цикл v-for='apps in sortedData' . Я уверен, что это неправильно. Vue на самом деле не моя сильная сторона.

У меня действительно нет никаких предпочтений относительно того, как это должно быть до тех пор, пока данные визуализируются в цифровом формате ASC.

есть идеи?

Спасибо

РЕДАКТИРОВАТЬ

Используя ответ Чейза, я все еще получаю данные, но они не отображаются. Пришлось убрать отрицание ( ! ).

Мутация и получатели State view из инструмента vue chrome

Мутация состояния вид из инструмента Vue Chrome

введите описание изображения здесь

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector