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

Question

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

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

<div>
  <div v-for="batches in allBatches" :key="batches.id">
     <div 
        v-for="dispatchstation in batches.dispatchstation" 
        :key="dispatchstation.id">
        <div v-for="apps in dispatchstation.applications" :key="apps.id">
          <div>{{apps}}</div>
        </div>
     </div>
  </div>
</div>

Структура данных в 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"
      ]
    }
  ]
}

],

Я пытался сделать это с помощью lodash, используя _.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) => ascDesc * a.applications.localeCompare(b.applications)
    );
  }
},

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

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

Есть мысли?

Спасибо

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

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

Мутация и геттеры State View из инструмента Vue Chrome

EDIT 2 - упрощенная версия модуля моего магазина

  import axios from "axios";

  const state = {
    batches: [],
  };

  const getters = {
    allBatches: state => {
      return state.batches;
    },
  };

  const actions = {
    async fetchBatches({ commit }) {
      const response = await axios.get(`${window.location.protocol}//${window.location.hostname}:4000/batches`);

      commit("setBatches", response.data);
    },
  };

  const mutations = {
    setBatches: (state, batches) => (state.batches = batches),
  };

  export default {
    state,
    getters,
    actions,
    mutations
  };

Answer 1

Я надеюсь, что я понял ваш вопрос, поэтому вам просто нужно заказать данные для их отображения, а вам не нужно, как заказано в вашем магазине?

, чтобы отобразить упорядоченные данные, вы можете использовать эти вычисленныеЯ надеюсь, что это поможет вам

computed:{

      ...mapGetters(["allBatches"]),

      orderApplications(){

        let copieBatches = JSON.parse(JSON.stringify(this.allBatches));

        copieBatches.forEach(batches => {

          batches.dispatchstation.forEach(dispatchstation=>{

            dispatchstation.applications.sort()

          })

        });

        return copieBatches
      }
}

, и ваш HTML будет выглядеть как

<div>
   <div v-for="batches in orderApplications">
      <div
         v-for="dispatchstation in batches.dispatchstation"
         :key="dispatchstation.id">
             <div v-for="apps in dispatchstation.applications">
                <div>{{apps}}</div>
              </div>
       </div>
   </div>
</div>

Answer 2

Надеюсь, я не ошибаюсь в вашем вопросе, но, по сути, я бы порекомендовал загружать ваши данные так же, как вы в настоящее время, и обрабатывать сортировку вычисленным методом.

Это предполагает, что длинапартии и диспетчерские пункты всегда будут 1.

new Vue({
  el: "#app",
  data: {
    allBatches: null
  },
  computed: {
    batchesSorted() {
      if (!this.allBatches) return {}
      
      const output = this.allBatches.batches[0].dispatchstation[0].applications;

      output.sort((a, b) => {
        return parseInt(a) - parseInt(b)
      })

      return output
    }
  },
  async created() {
    // Equivelent to ...mapGetters(["allBatches"]) for the example
    this.allBatches = {
      "batches": [{
        "dispatchstation": [{
          "applications": [
            "384752387450",
            "456345634563",
            "345634563456",
            "567845362334",
            "567456745677",
            "456734562457",
            "789676545365",
            "456456445556",
            "224563456345",
            "456878656467",
            "053452345344",
            "045440545455",
            "045454545204",
            "000014546546",
            "032116876846",
            "546521302151",
            "035649874877",
            "986765151231",
            "653468463854",
            "653853121324",
            "000145456555"
          ]
        }]
      }]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(item, key) in batchesSorted" :key="key">
    {{ item }}
  </div>
</div>

Дайте мне знать, если я что-то неправильно понял или у вас есть какие-либо вопросы.