按两个字段对计算对象和数组进行排序

Question

我从 API 中提取信息，该 API 返回以下格式的数据：[ {  "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我在这样的循环中显示信息（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 检查器选项卡中，计算出的国家和州（不是城市）似乎是按字母顺序排列的。有什么建议么？

Answer 1

一种解决方案是先对帖子进行排序，然后再按地址进行分组。

使用Array.prototype.sort()和String.prototype.localeCompare()，创建一个实用程序（名为sortPosts()）以在计算的 prop 中使用，该实用程序将按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)

  })

现在，我们将使用您已有的相同逻辑对这些帖子进行分组，但我们必须将局部resorts变量的数据类型从更改Object为Map，因为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>

演示