How do I get a plain array back from vuejs with a component?

Question

I am using a call to my database to retrieve some results and pushing them onto an array. However when I console.log(this.activeBeers) I don't get an array back but instead an object. How can I get a plain array back instead of a object?

Vue.component('beers', {
    template: '#beers-template',

    data: function() {
        return {
            activeBeers: []
        }
    },

    ready: function() {
        function getActiveBeers(array, ajax) {
            ajax.get('/getbeers/' + $('input#bar-id').val()).then(function (response) {
                $.each(response.data, function(key, value) {
                    array.push(value.id);
                });
            }, function (response) {
                console.log('error getting beers from the pivot table');
            });

            return array;
        }

        console.log(this.activeBeers = getActiveBeers(this.activeBeers, this.$http));
    },

    props: ['beers']
});

score 2 · Answer 1 · answered Jan 28 '16 at 15:57

2

AJAX is done asynchronously so you won't be able to just return the value that you do not have yet.

You should console.log your stuff after the $.each to see what you received.

answered Jan 28 '16 at 15:57

Andrius

5,934
20
28

I am doing that already check the code. The function contain the $.each loop is way before my log of the actual array. Besides that I am still receiving the correct values, except it's an object and not an array. – Stephan-v Jan 28 '16 at 16:01

Peter · Answer 2 · 2016-01-28T19:03:38.563

2

As the other answers pointed out, your getActiveBeers() call is returning before the callback that fills the array gets executed.

The reason your array is an object is because Vue wraps/extends arrays in the underlying data so that it can intercept and react to any mutating methods - like push, pop, sort, etc.

You can log this.activeBeers at the beginning of your ready function to see that it's an object.

By the way, if you want to log the unwrapped/plain array of activeBeers, you can use your component's $log method:

this.$log(this.activeBeers);

edited Jan 28 '16 at 19:03

answered Jan 28 '16 at 18:09

Peter

12,541
3
34
39

https://vuejs.org/api/#vm-log Here is the link to the vm.$log doc. This command reduces the complexity of getting to the data object and expressing it as a plain object. – Stradas Mar 22 '16 at 12:48

score 1 · Accepted Answer · edited Jan 28 '16 at 17:40

The other answer is correct, getActiveBeers sends an HTTP request and then immediately returns the array, it doesn't wait for the ajax request to come back. You need to handle the updating of activeBeers in the success function of the ajax request. You can use the .bind() function to make sure that this in your success function refers to the Vue component, that way you can just push the ids directly into your activeBeers array.

Vue.component('beers', {
    template: '#beers-template',

    data: function() {
        return {
            activeBeers: []
        }
    },

    ready: function() {
        this.getActiveBeers();
    },

    methods: {
        getActiveBeers: function(){

            this.$http.get('/getbeers/' + $('input#bar-id').val()).then(function (response) {

                $.each(response.data, function(key, value) {
                    this.activeBeers.push(value.id);
                }.bind(this));

                console.log(this.activeBeers);

            }.bind(this), function (response) {

                console.log('error getting beers from the pivot table');

            });

        }
    }

    props: ['beers']

});

@Stephan-v Can you post what the value is of `activeBeers` that you're seeing? — Jeff, Jan 28 '16 at 18:27
Ah yes, I think Peter's answer explains that issue. Vue variables are actually objects with a `get` function. So when you call `this.activeBeers`, it accesses the `get` function and gives you an array. But the actual variable is an object. For all intents and purposes, when you use it, it will be an array. — Jeff, Jan 28 '16 at 19:53

How do I get a plain array back from vuejs with a component?

3 Answers3