无法运行Bootstrap模式中的JavaScript代码

JavaScript code in modal of Bootstrap not run:

in cosole, the error is like this: if the code not put in modal,there is no error like above screenshot.

code:(code has not completed,I must let it run first.)

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

Based on the error you have at the top of your question you need to include the files that Vue references and you also need to include Jquery

JQUERY

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

Bootstrap:

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

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

Don't forget to init your Modal:

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