Блог

Я вызываю API для списка свойств, которые неорганизованы из API. Данные из API, хранящиеся в vuex, выглядят следующим образом:

 posts:[
  {
   id: 1;
   title: "Place",
   acf: {
     address: {
       state: "Arkansas",
       country: "United States"
     },
   },
  },
  {
   id: 2;
   title: "Place 2",
   acf: {
     address: {
       state: "Arkansas",
       country: "United States"
     },
   },
  },
  {
   id: 3;
   title: "Place 3",
   acf: {
     address: {
       state: "Arkansas",
       country: "United States"
     },
   },
  },
  {
   id: 4;
   title: "Place 4",
   acf: {
     address: {
       state: "Missouri",
       country: "United States"
     },
   },
  },
  {
   id: 5;
   title: "Place 5",
   acf: {
     address: {
       state: "Johor",
       country: "Malaysia"
     },
   },
  },
]
 

Мне нужно организовать данные для отображения в цикле v-for в следующем формате (сначала Соединенные Штаты, затем в алфавитном порядке):

• США
  • Арканзас
    • Разместить
    • Место 2
    • Место 3
  • Миссури
    • Место 4
• Малайзия
  • Джохор
    • Место 5

Насколько я понимаю, я должен использовать для этого вычисляемую функцию, но не могу получить иерархию:

 - Country
  - State 
    - Place

 

Вы могли бы создать вложенный словарь:

 computed: {
  dictionary() {
    const dictionary = {};
    this.$store.state.posts.forEach(post => {
      const c = post.acf.address.country;
      const s = post.acf.address.state;
      const t = post.title;
      dictionary[c] = dictionary[c] || {};
      dictionary[c][s] = dictionary[c][s] || [];
      dictionary[c][s].push(t);
    });
    return dictionary;
  }
}
 

Внешний объект имеет названия стран для ключей. Каждое значение страны само по себе является аналогичным объектом с именами состояний в качестве ключей. Значение состояния представляет собой массив мест.