如何在 SweetAlert2 html 输出中使用 v-for

Question

我正尝试在 vue-sweetalert2 的警报中显示以下模板：

<input v-model="name" class="swal2-input">

<select v-model="parent" name="parent" class="form-control">
  <option v-for="category in categories" v-bind:value="category.id">
    {{category.name}}
  </option>
</select>

我在普通模板中没有任何问题，但我不知道如何在 SweetAlert2 中使用它。

我试过这段代码：

this.$swal({
  text: 'edit child',
  html:
   '<input v-model="name" class="swal2-input">' +
   `<select v-model="parent" name="parent" class="form-control">
      <option value="">nothing</option>
      <option v-for="category in categories" v-bind:value="category.id">
        {{category.name}}
      </option>
    </select>`,
  showCancelButton: true,
  confirmButtonText: 'edit',
  cancelButtonText: 'cancel',
  showCloseButton: true,
})

但它什么也没显示。

Answer 1

由于传递给 SweetAlert2 的 HTML 不是由 Vue 处理的，模板机制（包括 v-for 和 v-model）将不可用，因此您必须手动创建JavaScript 的模板。具体来说，您将替换：

html: `<input v-model="name" class="swal2-input">
<select v-model="parent" name="parent" class="form-control">
  <option v-for="category in categories" v-bind:value="category.id">{{category.name}}</option> ...`

与：

html: `<input id="my-input" value="${this.name}" class="swal2-input">
<select id="my-select" value="${this.parent}" name="parent" class="form-control">
  ${this.categories.map(cat => `<option value="${cat.id}">${cat.name}</option>`)} ...`

请注意 <input> 和 <select> 已获得 ID，以便我们可以 fetch the values 在警报的 "pre-confirmation" 上：

const {value} = this.$swal({
  preConfirm: () => [
    document.getElementById("my-input").value,
    document.getElementById("my-select").value
  ]
});
console.log(value[0]); // value of my-input
console.log(value[1]); // value of my-select

demo

如何在 SweetAlert2 html 输出中使用 v-for

How to use v-for in SweetAlert2 html output

javascript

vue.js

vuejs2

sweetalert2