Как использовать v-for в SweetAlert2

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 шаблонов таким образом; но вам не нужно в этом случае. Вместо этого вы можете сгенерировать строку HTML в JavaScript следующим образом:

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