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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

按兩個字段對計算對象和數(shù)組進行排序

按兩個字段對計算對象和數(shù)組進行排序

千萬里不及你 2023-11-02 22:51:32
我從 API 中提取信息,該 API 返回以下格式的數(shù)據(jù):[ {  "id": 173,  "date": "2020-12-10T16:05:30",  "date_gmt": "2020-12-10T16:05:30",  "guid": {},  "modified": "2020-12-10T16:05:31",  "modified_gmt": "2020-12-10T16:05:31",  "slug": "test",  "status": "publish",  "type": "place",  "link": "http://localhost:81/test/",  "title": {},  "content": {},  "featured_media": 0,  "template": "",  "acf": {    "address": {    "address": "123 Test Address",    "street_number": "123",    "street_name": "Test Address",    "city": "Philipsburg",    "state": "Sint Maarten",    "country": "Sint Maarten",    "country_short": "SX"  },  "header": {}  },  "_links": {} }, etc]我將其存儲在 Vuex 中,并通過以下方式組織信息:computed: {    resorts() {      const resorts = {};      if (this.$store.state.loading === false) {        this.$store.state.posts.forEach((post) => {          const c = post.acf.address.country;          const s = post.acf.address.state;          //const t = post.title;          resorts[c] = resorts[c] || {};          resorts[c][s] = resorts[c][s] || [];          resorts[c][s].push(post);        });      }      return resorts;    },}v-for我在這樣的循環(huán)中顯示信息(Pug):section.united-states(v-for="(country, index) in resorts" v-if="index==='United States'")  h1(v-html="index")  section.state(v-for="(state, subIndex) in country" :key="subIndex" :class="subIndex.toLowerCase()")    h5(v-html="subIndex")    ul      li(v-for="post, resort) in state")        listing(:id="post.id" :slug="post.slug" :image="post.acf.header" :title="post.title.rendered" :city="post.acf.address.city" :street="post.acf.address.street_name_short")這樣可以正確顯示信息。但是,我需要它按Country、State、City名稱的字母順序排列。我嘗試對其進行排序并嘗試lodash.orderBy,但無法組織列表。從 Chrome 中的 Vue 檢查器選項卡中,計算出的國家和州(不是城市)似乎是按字母順序排列的。有什么建議么?
查看完整描述

1 回答

?
慕容708150

TA貢獻1831條經(jīng)驗 獲得超4個贊

一種解決方案是先對帖子進行排序,然后再按地址進行分組。

使用Array.prototype.sort()String.prototype.localeCompare(),創(chuàng)建一個實用程序(名為sortPosts())以在計算的 prop 中使用,該實用程序?qū)?code>country,?state,?city, thenstreet_name字段對帖子進行排序:

const sortPosts = posts =>

? posts.slice().sort((a,b) => {

? ? const countryA = a.acf.address.country

? ? const countryB = b.acf.address.country

? ? const stateA = a.acf.address.state

? ? const stateB = b.acf.address.state

? ? const cityA = a.acf.address.city || '' // can be undefined in Google Maps API

? ? const cityB = b.acf.address.city || '' // can be undefined in Google Maps API

? ? const streetA = a.acf.address.street_name

? ? const streetB = b.acf.address.street_name

? ? return countryA.localeCompare(countryB) || stateA.localeCompare(stateB) || cityA.localeCompare(cityB) || streetA.localeCompare(streetB)

? })

現(xiàn)在,我們將使用您已有的相同邏輯對這些帖子進行分組,但我們必須將局部resorts變量的數(shù)據(jù)類型從更改ObjectMap,因為Object迭代并不總是遵循插入順序,這會破壞排序sortPosts()


export default {

? computed: {

? ? resorts() {

? ? ? // BEFORE:

? ? ? // const resorts = {};


? ? ? const resorts = new Map();


? ? ? if (this.$store.state.loading === false) {

? ? ? ? sortPosts(this.$store.state.posts).forEach((post) => {

? ? ? ? ? const c = post.acf.address.country;

? ? ? ? ? const s = post.acf.address.state;


? ? ? ? ? // BEFORE:

? ? ? ? ? // resorts[c] = resorts[c] || {};

? ? ? ? ? // resorts[c][s] = resorts[c][s] || [];

? ? ? ? ? // resorts[c][s].push(post);


? ? ? ? ? if (!resorts.has(c)) {

? ? ? ? ? ? resorts.set(c, new Map());

? ? ? ? ? }

? ? ? ? ? const stateMap = resorts.get(c);

? ? ? ? ? if (!stateMap.has(s)) {

? ? ? ? ? ? stateMap.set(s, []);

? ? ? ? ? }

? ? ? ? ? stateMap.get(s).push(post);

? ? ? ? });

? ? ? }

? ? ? return resorts

? ? },

? }

}

從 v2.6.12 開始,v-for不支持Maps,因此使用Array.from()使其可迭代v-for


<section v-for="[country, countryData] in Array.from(resorts)" :key="country">

? <h1 v-html="country" />

? <section class="state" v-for="[state, posts] in Array.from(countryData)" :key="state" :class="state.toLowerCase()">

? ? <h5 v-html="state" />

? ? <ul>

? ? ? <li v-for="(post, resort) in posts" :key="post.id">

? ? ? ? ...

? ? ? </li>

? ? </ul>

? </section>

</section>

演示


查看完整回答
反對 回復(fù) 2023-11-02
  • 1 回答
  • 0 關(guān)注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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