Как сгруппировать буквы алфавита и рендерить в шаблон в vue

Question

У меня есть такие данные vuejs:

new Vue({
  el: "#app",
  data() {
    return {
      alpha: [{
          artist: "Aa"
        }, {
          artist: "Az"
        },
        {
          artist: "Ab"
        },
        {
          artist: "Ba"
        },
        {
          artist: "Bb"
        },
        {
          artist: "Bc"
        },
        {
          artist: "Da"
        },
        {
          artist: "Db"
        }, {
          artist: "Dc"
        }, {
          artist: "Dx"
        },
      ]
    }
  }
})

Я просто хочу взять первые буквы исполнителя: A, B, C, D и создать из них массив.После этого я хочу сгруппировать всех художников по их индексу.Таким образом, результат будет:

A: (3) ["Aa", "Az", "Ab"]
B: (3) ["Ba", "Bb", "Bc"]
D: (4) ["Da", "Db", "Dc", "Dx"]

Я могу сделать это в своем коде, см. Ниже, но шаблон не отображает его.

Вот скрипка https://jsfiddle.net/fcas1wke/ для этого работает, вы можете увидеть консоль для вывода

Answer 1

Массив не отображается, потому что вы используете нечисловые индексы в вашем массиве.Это описано более подробно здесь , но в основном нечисловые индексы не могут быть повторены, поэтому они не будут отображаться в выходных данных.

Более стандартный способ обработки этого будетиспользовать объект вместо массива.Вот рабочая версия вашего компонента:

Vue.component("alphabets", {
  props: ['data'],
  computed: {
    stack() {
      const result = {};
      this.data.forEach(function(element) {
        if (Array.isArray(result[element.artist[0]])) {
          result[element.artist[0]].push(element.artist);
        } else {
          result[element.artist[0]] = [element.artist];
        }
      });
      return result;
    },
  },
  template: `<div>{{ stack }}</div>`,
});

Обратите внимание, что эта версия использует вычисляемое свойство вместо изменения состояния компонента на created.