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
    });
  },

但是，它根本不起作用。我在上面的代码段第二行上收到一条错误的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中显示多个选择选项？

1 个答案: