通过其 html 方法使 sweetalert2 html 元素动态化

Question

正如标题所预期的，我想让 sweetalert2 的 html 元素动态化。

我正在使用 sweetalert2 库。 https://sweetalert2.github.io/

特别是，我有一个数组，里面有元素。 我的目标是创建与数组中元素一样多的复选框。

我尝试在 sweetalert2 提供的 html 方法中使用 foreach，但正如您可以从下面的可重现示例中轻松看到的那样，我什么也没得到。

const arr = ['Alex','Jasmine','Andrie','Elton','Susy'];

function test() {
Swal.fire({
    html: 
    arr.forEach(user => {
        `  
        <div>
            <input type="checkbox" id="user" name="user" value="">
            <label for="">User</label><br>
        </div>
        `
    }),
    focusConfirm: false,
  })
}

document.getElementById ("test").addEventListener ("click", test);

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>



  <button type="button" id="test" class="button">
    Click
  </button>

有人可以帮助我吗？你能告诉我哪里错了吗？

Answer 1

您应该将从

forEach

返回的所有值累积到一长串 HTML 中。使用

reduce

更容易做到。

const arr = ['Alex','Jasmine','Andrie','Elton','Susy'];

function test() {
Swal.fire({
    html: 
    arr.reduce((agg, user) => {
        agg += `  
        <div>
            <input type="checkbox" id="user" name="user" value="">
            <label for="">${user}</label><br>
        </div>
        `
        return agg;
    }, ''),
    focusConfirm: false,
  })
}

document.getElementById ("test").addEventListener ("click", test);

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>



  <button type="button" id="test" class="button">
    Click
  </button>