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

首先，我对Vue和frontend是新手

我有一个按钮，显示甜警报在我的

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

Yeni

有这个办法,

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)
    }
}

showSwal（类型）{
如果（类型==‘输入字段’）{
游泳({
标题：“输入某物”，
html:'+
'' +
'',
showCancelButton:true，
confirmButtonClass:“btn btn成功btn填充”，
取消按钮类：“btn btn危险btn填充”，
按钮样式：false
}).然后（函数（结果）{
游泳({
键入：“成功”，
html:'您输入'，
confirmButtonClass:“btn btn成功btn填充”，
按钮样式：false
})
}).catch（swal.noop）
}
}

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

我试过了

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

html:'

但它并没有表现出来

我不知道这能不能做到。其他框架，如inspina mvc，可以根据我所看到的实现这一点

---

我正在使用Vue Paper Dashboard Pro AdminTemplate，供仍在寻找的用户使用

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)

swal({
标题：“输入某物”，
html:“”，
showCancelButton:true，
confirmButtonClass:“btn btn成功btn填充”，
取消按钮类：“btn btn危险btn填充”，
按钮样式：false
onOpen:（）=>{
新Vue({
el:“.swal2含量”
});
},
}).然后（函数（结果）{
游泳({
键入：“成功”，
html:'您输入'，
confirmButtonClass:“btn btn成功btn填充”，
按钮样式：false
})
}).catch（swal.noop）

未捕获引用错误：未定义Vue