第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 VueJS 中按數(shù)字 (0-9) 對我的 API 數(shù)據(jù)進(jìn)行排序

在 VueJS 中按數(shù)字 (0-9) 對我的 API 數(shù)據(jù)進(jìn)行排序

天涯盡頭無女友 2021-11-25 19:11:24
我有從 API 映射的數(shù)據(jù)(見下文),我已經(jīng)達(dá)到了很好的水平,但我正在考慮按數(shù)字 (0-9) 對其進(jìn)行排序。我很難用 Vue 做到這一點(diǎn)。如果我的數(shù)據(jù)在 中是靜態(tài)的data(){...},我可以通過多種方式完成。但不是來自 API,因?yàn)槊慨?dāng)我嘗試從我的方法中的函數(shù)指向它時(shí),由于某種原因我無法指向它。我不知道發(fā)生了什么,我希望你們有一些指導(dǎo)。模板 - 由于 API 的嵌套,我也在嵌套循環(huán)。(也許還有更好的方法可以做到這一點(diǎn)。我全神貫注)。allBatches是我的吸氣劑。我正在通過我的狀態(tài)管理器 (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 中的數(shù)據(jù)結(jié)構(gòu) - 我有意省略了無關(guān)的數(shù)據(jù)。中間還有其他層。但這顯示了我正在循環(huán)和伸出的路徑。"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 來做到這一點(diǎn),并將_.orderBy其用作管道。沒運(yùn)氣。我也試過這個(gè):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 提供循環(huán)條件dispatchstations.applications和循環(huán)來使用(嘗試)這種方法v-for='apps in sortedData'。我確定那是錯(cuò)的。Vue 并不是我的強(qiáng)項(xiàng)。只要數(shù)據(jù)呈現(xiàn)按數(shù)字 ASC 排序,我真的沒有任何偏好應(yīng)該如何。有什么想法嗎?
查看完整描述

2 回答

?
紫衣仙女

TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊

我希望我理解了你的問題,所以你只需要訂購數(shù)據(jù)來呈現(xiàn)它,你不需要在你的商店訂購它?


要顯示有序數(shù)據(jù),您可以使用此計(jì)算函數(shù),希望對您有所幫助



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 會(huì)像


<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>


查看完整回答
反對 回復(fù) 2021-11-25
?
MM們

TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊

希望我沒有誤解您的問題,但基本上我會(huì)建議您以與您當(dāng)前相同的方式加載您的數(shù)據(jù)并在計(jì)算方法中處理排序。


這是假設(shè)批次和調(diào)度站的長度將始終為 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>


如果我誤解了什么或者您有任何疑問,請告訴我。


查看完整回答
反對 回復(fù) 2021-11-25
  • 2 回答
  • 0 關(guān)注
  • 280 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)