javascript - How do I get a plain array back from vuejs with a component? - Stack Overflow

admin管理员组

文章数量:1335615

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?

Vueponent('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']
});

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.ponent('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']
});

• javascript
• jquery
• arrays
• vue.js
• vue-resource

Share Improve this question Follow edited Jan 28, 2016 at 14:58 Mykola 3,37366 gold badges2626 silver badges4040 bronze badges asked Jan 28, 2016 at 14:55 Stephan-vStephan-v 20.4k3232 gold badges121121 silver badges210210 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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 ponent's $log method:

this.$log(this.activeBeers);

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 e 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 ponent, that way you can just push the ids directly into your activeBeers array.

Vue.ponent('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']

});

本文标签： javascriptHow do I get a plain array back from vuejs with a componentStack Overflow