Как использовать v-for в выводе html SweetAlert2 - PullRequest
Новая
       40

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

0 голосов
/ 10 октября 2018

Я пытаюсь показать следующий шаблон в предупреждении с 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,
})

, но он ничего мне не показывает.

1 Ответ

0 голосов
/ 11 октября 2018

Поскольку HTML, переданный SweetAlert2, не обрабатывается 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> были заданы идентификаторы, чтобы мы могли получить значения при «предварительном подтверждении» оповещения: 

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

демо

...