Laravel и VueJS, доступ к экземпляру Vue.

Question

Я хочу изменить свойство данных и запустить метод на моем экземпляре Vue в Laravel.Однако из-за использования webpack и laravel я не могу получить доступ к экземпляру, как я ожидал:

Так что window.app не является правильным экземпляром моего класса Vue.

Ниже показан Blade View, который я загружаю, как вы можете видеть, я добавляю тег script к своему основному layout.blade.php, просто пытаясь изменить свойство данных экземпляра Vue и запустить метод.

@push('scripts')
    <script>
        app.unsaved = true;
        app.triggerEvent(null, 'models', null);
    </script>
@endpush

Ниже приведена часть моего app.js (resources / assets / js / app.js):

const app = new Vue({
    el: '#app',
    components: {
        'models-select': ModelsSelect
    },
    data: {
        showModel: false,
        unsaved: false
    },
    mounted: function() {

        let _self = this;

        (function() {

            document.querySelectorAll("input, textarea, select").forEach(function(e) {
                e.addEventListener('change', function() {
                    _self.unsaved = true;
                    e.classList.add('is-changed');
                });
            });

            function unloadPage(){
                if (_self.unsaved) return 'You appear to have un-saved changes!';
            }

            window.onbeforeunload = unloadPage;

        })();

    },
    methods: {

        triggerEvent: function(event, target, property)
        {
            app.$refs[target].update(event, property);
        }

Как вы можете видеть, я ожидал манипулировать Vueэкземпляр через глобальную переменную app , которую я определил в app.js.Однако, похоже, это не так.

Я получаю следующую ошибку при запуске метода triggerEvent:

app.triggerEvent не является функцией

Answer 1

В вашем файле app.js измените const app = new Vue({ на window.app = new Vue({.

Затем в тегах <script> измените его на

<script>
    window.app.unsaved = true;
    window.app.triggerEvent(null, 'models', null);
</script>