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

Question

我想配置 Sweetalert2 模态，使我能够 select 从列表中选择不同的选项。使用以下代码可以轻松实现这一点：

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: {} 标签中添加新选项。但是，我想动态显示选项，而不必每次 add/remove 手动更改代码。

我正在通过调用 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
  ...
})

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

How to display multiple select options in Sweetalert2 with VueJS?

vue.js

sweetalert2