Vue продолжает добавлять неопределенные значения при добавлении непоследовательных индексов в массив?

Question

У меня есть простое приложение, в котором пользователь выбирает значение из выпадающего списка, и когда он нажимает кнопку «Добавить», это значение и его идентификатор должны быть заполнены в массив, используя идентификатор в качестве индекса.

Пример:

Значения

---

1 - Яблоко
3 - Бананы 8 - Груши

Пользователь выбирает каждый фрукт, нажимая добавить послекаждый выбор.Мой массив должен выглядеть так:

 [
    1: Apple,
    3: Bananas,
    8: Pears
 ]

Однако в Vue я получаю следующее:

[
    1: Apple,
    2: undefined,
    3: Bananas,
    4: undefined,
    5: undefined,
    6: undefined,
    7: undefined,
    8: Pears
]

Эти значения передаются в качестве входных данных для проверки сервера, и, очевидно, этосоздание проблемы с длиной массива и правилами проверки.Как я могу удалить эти неопределенные значения или запретить Vue заполнять их в первую очередь?

Answer 1

Vue не вставляет undefined в ваш массив.Это просто поведение массивов JavaScript (т. Е. разреженных массивов ).

Быстрое решение для получения нового массива определенных элементов - использовать Array.prototype.filter:

const input = [
  'Apple',
  undefined,
  'Bananas',
  undefined,
  undefined,
  undefined,
  undefined,
  'Pears'
];
const output = input.filter(x => x); // filter out undefined elements
console.log(output)

Answer 2

Массивы всегда смежные;любые «дыры» в массиве будут заполнены undefined.

. Вместо этого вы хотите использовать объект:

{
  data() {
    return {
      items: {}
    }
  },

  methods: {
    add(id, item) {
      // Vue cannot detect property additions, so we must use
      // this method to do so
      this.$set(this.items, id, item)
    }
  }
}

Если вы визуализируете элементы этого объекта вшаблон с v-for, порядок, как правило, будет таким же, как порядок, в котором каждый элемент был добавлен к объекту (см. v-for с объектом ).Если вам требуется, чтобы элементы отображались в порядке идентификации, вам необходимо отсортировать элементы:

<div v-for="item of itemsArray">{{ item }}</div>

computed: {
  itemsArray() {
    return Object.entries(this.items)
      .sort((a, b) => a[0] - b[0])  // sort entry key (ID)
      .map(a => a[1])  // take entry value
  }
}