Laravel and VueJS, access Vue instance.

Question

I want to change a data property and run a method on my Vue instance within Laravel. However due to using webpack and laravel I can't seem to access the instance how I would expect to:

So window.app doesn't appear to be the correct instance of my Vue class.

Below is the Blade View i'm loading, as you can see I append a script tag to my main layout.blade.php, simply trying to change the Vue instance data property, and run a method.

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

Below is part of my 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);
        }

As you can see i'd expect to manipulate the Vue instance through the global app variable I have defined within the app.js. However this doesn't appear to be the case.

I get the following error when running the triggerEvent method:

app.triggerEvent is not a function

George Hanson · Accepted Answer · 2018-09-24 12:56:37Z

3

In your app.js file, change const app = new Vue({ to window.app = new Vue({.

Then within your <script> tags, change it to this.

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

answered Sep 24, 2018 at 12:56

George Hanson

3,0401 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martyn Ball Over a year ago

I thought that by defining the const in the global space it would get assigned to the window. Thanks, this works.

George Hanson Over a year ago

No problem. When Webpack transpiles it down, it will just change it from a const to a var - so it won't be available on the window object.

Collectives™ on Stack Overflow

Laravel and VueJS, access Vue instance.

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related