vue.js - 如何使用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

您可以使用compated属性为inputOptions准备数据

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

然后

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