자바 스크립트 코드하지하지 실행 부트 스트랩의 모달에

Question

자바 스크립트 코드를 실행 : 모달에 넣지 코드, 위의 같은 오류가없는 경우 : cosole에서

오류는 다음과 같이이다 스크린 샷.

코드 (코드가 완료되지 않은, 내가 먼저 실행할 수 있도록해야합니다.)

<style> 
    #image { 
     max-width: 100%; 
    } 
</style> 

<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" 
    aria-hidden="true"> 
    <div class="modal-dialog modal-lg" role="document"> 
     <div class="modal-content" id="app" @submit.prevent="submit"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 
          aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="gridModalLabel">upload avatar</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="container-fluid bd-example-row"> 
        <div class="row"> 
         <div class="col-md-8" style="height: 540px; "> 
          <img id="originalImage" class="card-img-top" src="holder.js/540x540?text=preview&amp;nowrap=true" alt="" style="width: 100%; display: block;"> 
         </div> 
         <div class="col-md-4"> 
          <div class="card"> 
           <div class="card-block"> 
            <h6 class="card-subtitle text-muted">preview：</h6> 
           </div> 
           <img id="preview" alt="avatar" src="holder.js/180x180?text=preview&amp;nowrap=true" style="height: 180px; width: 180px;"> 
          </div> 

          <div class="btn-group" role="group" aria-label="Basic example"> 
           <button type="button" class="btn btn-secondary"><i class="fa fa-undo" aria-hidden="true"></i></button> 
           <button type="button" class="btn btn-secondary"><i class="fa fa-repeat" aria-hidden="true"></i></button> 
          </div> 

          <div class="form-group"> 
           <label for="avatar">File input</label> 
           <input type="file" class="form-control-file" id="avatar" name="avatar" @change="preview($event)"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">cancel</button> 
       <button type="submit" class="btn btn-primary">保存</button> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="bd-example bd-example-padded-bottom"> 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal"> 
     upload avatar 
    </button> 
</div> 

<script> 
    Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name=csrf-token]').getAttribute('content') 

    new Vue({ 
     el: '#app', 
     data: { 
      avatar: {}, 
      originalImage:{} 
     }, 
     methods: { 
      preview: function(event) { 
       var picture = event.target.files; 
       $('#preview').attr('src', picture[0]); 
       this.avatar=picture[0]; 
      }, 
      submit: function(event) { 
       var formData=this.businessLicence.formData; 
       console.log(formData); 

       this.$http.post('/avatar/', formData,{ 
        before(request) { 
         if (this.previousRequest) { 
          this.previousRequest.abort(); 
         } 
         this.previousRequest = request; 
        } 
       }).then((response) => { 
        // success callback 
      }, (response) => { 
        // error callback 
       }); 
      } 
     } 
    }); 
</script> 

<script> 
    $('#image').cropper({ 
     aspectRatio: 1/1, 
     crop: function (e) { 
      // Output the result data for cropping image. 
      console.log(e.x); 
      console.log(e.y); 
      console.log(e.width); 
      console.log(e.height); 
      console.log(e.rotate); 
      console.log(e.scaleX); 
      console.log(e.scaleY); 
     } 
    }); 
</script> 

Answer 1

당신이 당신의 질문의 상단에있는 오류를 기반으로 사용자가 파일을 포함 할 필요가 뷰 참조하고 또한 jQuery를 포함 할 필요가

JQUERY

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

Answer 2

부트 스트랩 :

일부 플러그인 및 CSS 구성 요소는 다른 플러그인에 종속됩니다. 에 플러그인을 개별적으로 포함하는 경우 문서에 이러한 종속성이 있는지 확인하십시오. 또한 모든 플러그인은 jQuery 에 의존합니다 (이는 jQuery가 플러그인 파일보다 먼저 포함되어야 함을 의미합니다).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> 

은 모달 초기화하기 위해서 잊지 마세요 :

<script> 
$('#gridSystemModal').modal('show'); 
</script>