How to access properties on Vue instance from view?

Published 4 weeks ago by barbarouspony

I have this in my app.js:

const app = new Vue({
    el: '#app',
    data: {
        options: []
    }
});

and in my view I have:

@push('scripts')
<script>
    $('#signup-modal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget)
        var route = button.data('route')
        axios.get(route).then(function(response) {
            app.options = response.data
        });
    });
</script>
@endpush

On opening the modal an axios get call is being made, and I want to pass the values from the axios request back to the Vue instance, but it does not update. What am I doing wrong?

robrogers3

app.$options = response.data

wilburpowery

Maybe just use add all that logic in the app component? You should not update the data of a component outside of itself.

wilburpowery

You can have an @click event on the modal, and then just do all the logic you need from a method. IMO

robrogers3

@wilburpowery is correct. why are you mixing the 2? if you know view, kill jquery.

wilburpowery

Exactly!! @robrogers3

Goldoni
@push('scripts')
<script>
   let that = this
    $('#signup-modal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget)
        var route = button.data('route')
        axios.get(route).then(function(response) {
            that.options = response.data
        });
    });
</script>
@endpush

Please sign in or create an account to participate in this conversation.