如何在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中的数组上使用Array.prototype.map将数组值映射到response.data.data.schools s的数组中。然后，它使用div将结果数组值组合为一个长HTML字符串。

Array.prototype.join