在 VueJS 中按数字 (0-9) 对我的 API 数据进行排序

Question

我有从 API 映射的数据（见下文），我已经达到了很好的水平，但我正在考虑按数字 (0-9) 对其进行排序。我很难用 Vue 做到这一点。如果我的数据在 中是静态的data(){...}，我可以通过多种方式完成。但不是来自 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 排序，我真的没有任何偏好应该如何。有什么想法吗？

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>

如果我误解了什么或者您有任何疑问，请告诉我。