javascript - Vue.js，如何从组件中填充 SweetAlert2 html 表单数据

Question

首先，我是 Vue 和前端的新手。

我有一个按钮可以在我的...中显示甜蜜警报

<button class="btn btn-sm btn-fill btn-wd" @click="showSwal('input-field')">Yeni</button>

并有这个方法；

showSwal(type) {
  if (type === 'input-field') {
      swal({
        title: 'Input something',
        html: '<div class="form-group">' +
        '<input id="input-field" type="text" class="form-control" />' +
        '</div>',
        showCancelButton: true,
        confirmButtonClass: 'btn btn-success btn-fill',
        cancelButtonClass: 'btn btn-danger btn-fill',
        buttonsStyling: false
      }).then(function (result) {
        swal({
          type: 'success',
          html: 'You entered',
          confirmButtonClass: 'btn btn-success btn-fill',
          buttonsStyling: false
        })
      }).catch(swal.noop)
    }
}

我不想把 html 数据放在这个范围内，而是想把我的另一个模板组件 NewMerchant.vue 放在

我试过了

html: '<new-merchant></new-merchant>'

但它不渲染它。

而且我不知道这是否可以做到。据我所见，其他框架如 inspina mvc 可以实现这一点。

我正在使用 Vue Paper Dashboard Pro AdminTemplate

Answer 1

对于仍在寻找的任何人，您都可以使用

onOpen: () => {
   new Vue({
        el: ".swal2-content"
   });
},

像这样

swal({
    title: 'Input something',
    html: '<new-merchant></new-merchant>',
    showCancelButton: true,
    confirmButtonClass: 'btn btn-success btn-fill',
    cancelButtonClass: 'btn btn-danger btn-fill',
    buttonsStyling: false
    onOpen: () => {
       new Vue({
            el: ".swal2-content"
       });
    },
  }).then(function (result) {
    swal({
      type: 'success',
      html: 'You entered',
      confirmButtonClass: 'btn btn-success btn-fill',
      buttonsStyling: false
    })
  }).catch(swal.noop)