vue.js - 如何在 SweetAlert2 中使用 v-for

Question

this.$swal
.fire({
  title: '학교를 검색해주세요.',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: '검색하기',
  cancelButtonText: '취소',
  icon: 'question',
  preConfirm: (school) => {
    return axios.get(`(serverIp)/school?query=${school}`)
      .then(response => {
        console.log(response.data.data.schools)
        this.$swal.fire({
          title:'학교를선택해주세요.',
          html: `<div v-for="(item, index) in response.data.data.schools" :key="index">
                     {{ item.school_name }}
                 </div>`
            })
          })
      },
      allowOutsideClick: () => !this.$swal.isLoading()
 })

我试过这段代码，但这是它在 html 中的样子。

{{ item.school_name }}

我该怎么办？

我没有使用“Sweetalert 2，如果我不能，希望您能理解。

Answer 1

vue-sweetalert2 不支持动态渲染 HTML 模板，所以你不能通过这种方式传递 Vue 模板；但在这种情况下你真的不需要。相反，您可以像这样在 JavaScript 中生成 HTML 字符串:

axios
  .get(apiUrl)
  .then(response => {
    this.$swal.fire({
      html: response.data.data.schools
              .map(item => `<div>${item.school_name}</div>`)
              .join('')
    })
  })

以上代码使用Array.prototype.map在 response.data.data.schools 中的数组上，将数组值映射到 div 的数组中。然后它使用 Array.prototype.join将生成的数组值组合成一个长 HTML 字符串。

demo