如何使用VueJS在Sweetalert2中显示多个选择选项？

Question

我想以这样的方式配置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模式中的选项。有更简单，更有效的方法吗？

Answer 1

您可以使用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
  ...
})