javascript - 在 VueJS 中对我的 API 数据进行数字排序（0-9）

问题描述

我有从 API 映射的数据（见下文），我可以达到很好，但我正在考虑对它进行数字排序（0-9）。我很难用 Vue 做到这一点。如果我的数据是静态的data(){...}，我可以通过多种方式完成它。但不是来自 API，因为每当我尝试从方法中的函数指向 API 时，由于某种原因我无法指向 API。我不知道发生了什么，我希望你们有一些方向。

模板 - 由于 API 的嵌套，我也在嵌套循环。（也许还有更好的方法可以做到这一点。我全神贯注）。allBatches是我的吸气剂。我通过状态管理器 (Vuex) 提供 API

<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 排序，我真的没有任何偏好。

有什么想法吗？

谢谢

编辑

使用 Chase 的回答，我仍在获取数据，但没有显示。我不得不删除否定（!）。

来自 vue chrome 工具的 State 视图的 Mutation 和 getter

编辑 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
  };

标签： javascriptvue.jsvuejs2

希望我没有误解您的问题，但基本上我建议您以与您当前相同的方式加载您的数据并在计算方法中处理排序。

这是假设批次和调度站的长度始终为 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>

让我知道我是否误解了任何内容或您有任何问题。

javascript - 在 VueJS 中对我的 API 数据进行数字排序（0-9）

问题描述

解决方案

推荐阅读