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

【问题标题】：How to display multiple select options in Sweetalert2 with VueJS?如何使用 VueJS 在 Sweetalert2 中显示多个选择选项？
【发布时间】：2019-04-22 00:59:33
【问题描述】：

我想以能够从列表中选择不同选项的方式配置 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: {} 标记内使用我自己项目中的代码 sn-p，希望它能以与方法内相同的方式工作：

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

但是，它根本不起作用。我在上面的 sn-p 代码的第二行收到一个错误 Uncaught SyntaxError: Unexpected token .。

我想要做的就是在 Sweetalert2 模式中从数据库中检索和显示选项。有没有更简单、更有效的方法？

【问题讨论】：

标签： vue.js sweetalert2

【解决方案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
  ...
})

【讨论】：

这就像一个魅力。我真的很感动。非常感谢！
另外，你能解释一下代码吗？我想了解这个过程，而不仅仅是复制粘贴。
inputOptions 是一个对象，您需要为其准备格式正确的数据。最方便的方法是使用computed 属性。可以在vuejs.org/v2/guide/computed.html查看官方文档