Преобразование массива текста в выпадающие элементы?

Question

Я использую Vue и vue -бутюр. У меня есть массив текстовых элементов, поступающих из моей базы данных, которые заполнены в <b-form-select> (раскрывающийся список). Этот элемент bootstrap принимает объекты в форме {value: 'some value', text: 'displayed text'}.

Мой массив имеет форму ['item1', 'item2', 'item3'].

Есть ли более эффективный способ сделать мой массив выпадающим дружественные объекты без уродливого forEach, создающего каждый новый объект в новом дружественном для выпадающего списка массиве? Сейчас у меня есть:

formatEventTypes() {
  this.eventTypes = [];
  this.rawEventTypes.forEach(rawType => {
    this.eventTypes.push({value: rawType, text: rawType});
  });
}

Это работает, но, учитывая, что у меня есть несколько выпадающих меню, это не самый эффективный.

Спасибо!

Answer 1

this.eventTypes = this.rawEventTypes && this.rawEventTypes.map(({ type }) => ({ value: type, text: type}))

но я не понимаю, почему ваш код ( rawType.type ) будет работать, если ваш массив имеет вид

['item1', 'item2', 'item3']

вместо

[{ type: 'item1' }, { type: 'item2' }, { type: 'item3' }]

Answer 2

Вы можете определить функцию, как показано ниже, и использовать ее несколько раз.

//rawItems is array of string
//eg: ['item1', 'item2', 'item3']
function getDropdownItems(rawItems) {
  var dropdownItems = [];
  rawItems.forEach(item => {
    dropdownItems.push({value: item, text: item});
  });
  return dropdownItems;
}