javascript - bootstrap的modal中写js代码不能运行-PHP中文网问答

bootstrap的modal中写js代码不能运行:

一个上传头像的功能，在客户端剪裁后上传，用cropper这个插件来完成剪裁。

这个功能放到bootstrap的modal中，后台用的laravel框架，这个model是一个blade.php文件，然后在使用的地方引入。

js代码也写在这个modal中，js代码不能运行，浏览器控制台报错：

备注：如果不写在modal中，是不会出现上面截图所示错误的。

下面是代码，具体代码可以不看。现在要解决的问题是怎么可以让js代码运行。

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

<p id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel"
     aria-hidden="true">
    <p class="modal-dialog modal-lg" role="document">
        <p class="modal-content"  id="app" @submit.prevent="submit">
            <p 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">上传头像</h4>
            </p>
            <p class="modal-body">
                <p class="container-fluid bd-example-row">
                    <p class="row">
                        <p class="col-md-8" style="height: 540px; ">
                            <img id="originalImage" class="card-img-top" src="holder.js/540x540?text=预览&amp;nowrap=true" alt="" style="width: 100%; display: block;">
                        </p>
                        <p class="col-md-4">
                            <p class="card">
                                <p class="card-block">
                                    <h6 class="card-subtitle text-muted">预览：</h6>
                                </p>
                                <img id="preview" alt="头像" src="holder.js/180x180?text=预览&amp;nowrap=true" style="height: 180px; width: 180px;">
                            </p>

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

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

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