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

我试图在带有

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>

{{category.name}

我没有任何问题，在一个正常的模板，但我不知道如何使用这个在

我尝试了以下代码：

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

this.$swal({
文本：“编辑子项”，
html:
'' +
`
没有什么
{{category.name}
`,
showCancelButton:true，
confirmButtonText:“编辑”，
cancelButtonText:“取消”，
showCloseButton：正确，
})

---

由于传递给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> ...`

---

你把这个放在哪里。$swal（…？在我的组件中，我对普通swal（）没有任何问题。你有错误吗？没有，但它只是告诉我{{caregory.name}你的sweatalert内容超出了Vue范围，它在${this.categories.map上给我错误（cat=>

${cat.name}

}）我不能使用${}在switalert html输出中，它需要位于您已经在使用的模板文本字符串中（如问题所示）。您可以编辑以重现该问题吗？@MahdiMirhendi没问题：）

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>`)} ...`

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