모달 vue 구성 요소 양식 내에 데이터베이스 테이블 값 바인딩

Question

Laravel 5.3 응용 프로그램에서 사용자가 단추를 클릭하여 데이터를 편집 할 때 표시되는 모달 구성 요소가 있습니다. 모달 창

로드 다음 코드를 사용하여 수행됩니다

<a 
    href="#" 
    class="btn btn-sm btn-info" 
    data-toggle="modal" 
    data-target="#editCountryModal" 
    data-country-id="{{ countries['id'] }}" 
    data-country-code="{{ countries['code'] }}" 
    data-country-name="{{ countries['name'] }}" 
    data-country-currency-code="{{ countries['currency_code'] }}" 
    data-country-currency-name="{{ countries['currency_name'] }}" 
    data-country-display="{{ countries['display'] }}" 
> 
    <i class="fa fa-lg fa-pencil"></i> 
</a> 

위의 코드는 모달 구성 요소 내부에 다음과 같은 형식을로드합니다.

<template> 
    <div class="errors"></div> 

    <form method="POST" @submit.prevent="updateCountry"> 
     <div class="form-group"> 
      <label for="name">Id:</label> 
      <input 
       type="text" 
       name="id" 
       id="countryId" 
       class="inputText" 
       autofocus="autofocus" 
       placeholder="1" 
       readonly="readonly" 
       v-model="formData.countryId" 
      /> 
     </div> 

     <div class="form-group"> 
      <label for="name">Name:</label> 
      <input 
       type="text" 
       name="name" 
       id="name" 
       class="inputText" 
       placeholder="Eg. India" 
       required="required" 
       v-model="formData.name" 
      /> 
      <div class="error"> 
       <span v-if="formErrors['name']" 
         class="text-danger" 
       > 
         {{ formErrors['name'] }} 
       </span> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="code">Code:</label> 
      <input 
       type="text" 
       name="code" 
       id="code" 
       class="inputText" 
       placeholder="Eg. IND" 
       required="required" 
       v-model="formData.code" 
      /> 
      <div class="error"> 
       <span v-if="formErrors['code']" 
         class="text-danger" 
       > 
        {{ formErrors['code'] }} 
       </span> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="currency_name">Currency Name:</label> 
      <input 
       type="text" 
       name="currency_name" 
       id="currency_name" 
       class="inputText" 
       placeholder="Eg. Indian National Rupee" 
       required="required" 
       v-model="formData.currency_name" 
      /> 
      <div class="error"> 
       <span v-if="formErrors['currency_name']" 
         class="text-danger" 
       > 
        {{ formErrors['currency_name'] }} 
       </span> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="currency_code">Currency Code:</label> 
      <input 
       type="text" 
       name="currency_code" 
       id="currency_code" 
       class="inputText" 
       placeholder="Eg. INR" 
       required="required" 
       v-model="formData.currency_code" 
      /> 
      <div class="error"> 
       <span v-if="formErrors['currency_code']" 
         class="text-danger" 
       > 
        {{ formErrors['currency_code'] }} 
       </span> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="display">Display:</label> 
      <select name="display" 
        id="display" 
        class="selectText" 
        required="required" 
        v-model="formData.display" 
      > 
       <option value="Disabled" selected="selected">Disabled</option> 
       <option value="Enabled">Enabled</option> 
      </select> 
      <div class="error"> 
       <span v-if="formErrors['display']" 
         class="text-danger" 
       > 
        {{ formErrors['display'] }} 
       </span> 
      </div> 
     </div> 

     <button type="submit" class="button button--teal">Edit</button> 
    </form> 
</template> 
<script> 
    export default { 
     data() { 
      return { 
       formData: { 
        countryId: '', 
        name: '', 
        code: '', 
        currency_name: '', 
        currency_code: '', 
        display: '' 
       }, 
       formErrors: {}, 
       allCountries: [] 
      } 
     }, 

     ready: function() { 
      this.fetchAllCountries(); 
     }, 

     methods: { 
      notify: function(mType, mTitle, mMessage, nDelay) { 
       $.iGrowl({ 
        type: mType == 'success' ? 'success' : 'error', 
        title: mTitle, 
        message: mMessage, 
        icon: mType == 'success' ? 'steadysets-checkmark !' : 'feather-cross', 
        delay: nDelay, 
        animShow: 'bounceInRight', 
        animHide: 'bounceOutRight' 
       }); 
      }, 

      fetchAllCountries: function() { 
       $.get('/api/all-countries', function(countries) { 
        this.allCountries = countries; 
       }.bind(this), 'json'); 
      }, 

      updateCountry: function(e) { 
       $('.button').addClass('button--disabled') 
          .html('<i class="fa fa-spinner fa-spin"></i> Editing...'); 
       $(document).find('i.fa.fa-spinner.fa-spin').show(); 

       this.$http 
        .post('/admin/settings/update-country/' + this.formData.countryId, this.formData) 
        .then((result) => { 
         var res = result.data; 

         $('.button').removeClass('button--disabled').html('Edit'); 
         $(document).find('i.fa.fa-spinner.fa-spin').hide(); 

         // 3000 is the number of seconds before disappearing 
         this.notify(res.status, res.title, res.message, 3000); 
        }, 
        (err) => { 
         $('.button').removeClass('button--disabled').html('Edit'); 
         $(document).find('i.fa.fa-spinner.fa-spin').hide(); 

         if (err.status === 422) { 
          var errors = err.data; 
          this.formErrors = errors; 

         } 
       }); 

       return false; 
      } 
     } 
    } 
</script> 

위의 양식을 제출할 때마다 아무런 결과없이 제출됩니다. 위의 모든 필드에 빈 문자열이 표시됩니다. 그러나 수동으로 각 필드를 방문하면 적절한 필드 값을 사용하여 제출됩니다.

사용자가 제출 버튼을 클릭 할 때마다 값이 업데이트되어야합니다. 사용자가 모든 필드를 클릭해서는 안되기 때문에 vue가이를 인식 할 수 있어야합니다.

편집 1 :

이 내가 모달를 호출하는 방법입니다

@section('pageScripts') 
    <script> 
     $('#editCountryModal').on('show.bs.modal', function(e) { 
      var link = $(e.relatedTarget); 

      var id   = link.data('country-id'); 
      var name   = link.data('country-name'); 
      var code   = link.data('country-code'); 
      var currency_name = link.data('country-currency-name'); 
      var currency_code = link.data('country-currency-code'); 
      var display  = link.data('country-display'); 

      var modal = $(this); 
      modal.find('.modal-title').html('Edit Country: ' + name); 
      modal.find('.modal-body #countryId').val(id); 
      modal.find('.modal-body #name').val(name); 
      modal.find('.modal-body #code').val(code); 
      modal.find('.modal-body #currency_name').val(currency_name); 
      modal.find('.modal-body #currency_code').val(currency_code); 
      modal.find('.modal-body #display').val(display); 
     }); 

    </script> 
@endsection 

결론 질문 : 나는의 (모달 창에로드) 기본값을 제출하려면 어떻게 사용자가 제출 버튼을 클릭하면 양식이 생성됩니까?

도움이 매우 감사합니다. 감사.

Answer 1

Jquery는 Vue 내부 개체 구조에 대한 액세스 권한이 없으므로 호환성 문제가 발생할 수있는 Jquery와 Vue의 조합을 사용하고 있습니다. Sam이 말한대로 VueStrap은 리팩토링을 찾는 데 좋은 장소가 될 것입니다.

다른 옵션은 Vue Root를 저장하고 $ broadcast를 사용하여 dom 객체 값을 설정하는 대신 데이터를 모델로 전파하는 이벤트를 양식에 보냅니다.

@section('pageScripts') 
    <script> 
     $('#editCountryModal').on('show.bs.modal', function(e) { 
      var object = { 
       countryId:  link.data('country-id'), 
       name:   link.data('country-name'), 
       code:   link.data('country-code'), 
       currency_name: link.data('country-currency-name'), 
       currency_code: link.data('country-currency-code'), 
       display:  link.data('country-display') 
      }; 

      window.Vm.$broadcast('fillModal', object); 
     }); 
    </script> 
@endsection 

곳 window.Vm 당신의 세계 저장된 루트 노드 당신 VUE 초기화가 window.Vm = new Vue({...})

을 갈 것이라고 및 구성 요소 구조는 다음과 같을 것이다, 그래서 대신,

<script> 
    export default { 
     data() { 
      return { 
       formData: { 
        countryId: '', 
        name: '', 
        code: '', 
        currency_name: '', 
        currency_code: '', 
        display: '' 
       },... 
      } 
     }, 
     ready: function() {...}, 
     methods: {...}, 
     events: { 
      "fillModal": function(object){ 
       this.formData = object; 
      } 
     } 
    } 
</script>