Vue.js, 컴포넌트에서 SweetAlert2 html 폼 데이터를 입력하는 방법

Vue.js, 컴포넌트에서 SweetAlert2 html 폼 데이터를 입력하는 방법

우선 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를 넣습니다.표시하다

해봤어요

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

하지만 그렇게 되지는 않아요.

그리고 나는 이것이 가능한지 아닌지 모르겠다.제가 본 바로는 inspina mvc와 같은 다른 프레임워크가 이를 달성할 수 있습니다.

Vue Paper Dashboard Pro Admin Template를 사용하고 있습니다.

아직 찾고 계신 분은

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)

언급URL : https://stackoverflow.com/questions/47669275/vue-js-how-to-fill-sweetalert2-html-form-data-from-component