Как отобразить несколько вариантов выбора в Sweetalert2 с VueJS? - PullRequest
Новая
       16

Как отобразить несколько вариантов выбора в Sweetalert2 с VueJS?

1 голос
/ 22 апреля 2019

Я хочу настроить модал Sweetalert2 таким образом, чтобы я мог выбирать различные опции из списка.Это было легко достигнуто с помощью следующего кода: 

swal({
  title: 'Select Outage Tier',
  input: 'select',
  inputOptions: {
    '1': 'Tier 1',
    '2': 'Tier 2',
    '3': 'Tier 3'
  },
  inputPlaceholder: 'required',
  showCancelButton: true,
  inputValidator: function (value) {
    return new Promise(function (resolve, reject) {
      if (value !== '') {
        resolve();
      } else {
        reject('You need to select a Tier');
      }
    });
  }
}).then(function (result) {
  if (result.value) {
    swal({
      type: 'success',
      html: 'You selected: ' + result.value
    });
  }
});

Он был скопирован из другого вопроса и работал как шарм для первой части моего проекта.Я могу добавить новые опции в тег inputOptions: {}.Однако я хочу, чтобы параметры отображались динамически, без необходимости изменять код вручную каждый раз, когда добавляете / удаляете один из них.

Я получаю параметры из базы данных, вызывая API.Эта часть также была сделана быстро, и она работает довольно хорошо.Я извлекаю данные и сохраняю их в переменной options: ''.Данные сохранены и готовы к использованию с приведенным выше кодом.

ЗДЕСЬ ПРИБЫВАЕТ ПРОБЛЕМА: я все еще довольно плохо знаком с VueJS, и все, что я могу сейчас сделать, - это базовое кодирование.Я попытался использовать фрагмент кода из моего собственного проекта внутри тега inputOptions: {}, надеясь, что он будет работать так же, как он работает внутри метода: 

  inputOptions: {
   this.options.forEach((option) => {
      option.id : option:name
    });
  },

Однако он не работаетсовсем.Я получаю ошибку Uncaught SyntaxError: Unexpected token . во второй строке кода фрагмента выше.

Все, что я хочу сделать, - это извлечь и отобразить опции из базы данных внутри модема Sweetalert2.Есть ли более простой и эффективный способ сделать это?

1 Ответ

2 голосов
/ 22 апреля 2019

Вы можете использовать свойство computed для подготовки данных для inputOptions

computed: {
  optionsDict() {
     if (!this.options) return {}
     return this.options.reduce((a, c) => {
      a[c.id] = c.name
      return a
     }, {})
  }
}

, а затем 

swal({
  ...
  inputOptions: this.optionsDict
  ...
})
...