How to return data from method in Vue.js?

Question

I'm learning Vue.js, and I have trouble finding anything related to this topic. I fetch the data from the API, which shows in console.log correctly, but I can't seem to return it to the template view. I am not trying to send this data to another component; I want to display it. How do you make this happen? In React, I would map the result and return the HTML. How do you do this in Vue.js? Also, I am doing this in Laravel 8.

<template>
    <div>
        {{ data }}
    </div>
</template>
<script>
    let api = location.search.replace("?", "/");
    api = api.replace("=", "");

    export default {
        name: "Play",
        data: function () {
            return {
                data: data
            };
        },
        created() {
            this.getQuestions();
        },
        methods: {
            getQuestions() {
                let data = [];
                fetch(api)
                    .then(response => response.json())
                    .then(response => {
                        return (data = response.results);
                    })
                    .catch(err => console.log(err));
            }
        }
    };
</script>

catsock · Accepted Answer · 2021-07-02 18:58:25Z

2

To access a data property on a Vue component, you must use the this accessor:

this.data = response.results

answered Jul 2, 2021 at 18:58

catsock

1,8711 gold badge24 silver badges40 bronze badges

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

2 Comments

user15214339 Over a year ago

I have tried that and this is the error Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: vuejs.org/v2/guide/….

catsock Over a year ago

That is likely because of the data: data part; you're assigning data to the value of a global data variable that doesn't exist. Try initializing it to data: [].

ravvis · Accepted Answer · 2021-07-02 19:11:08Z

1

What is data here?

data: function() {
        return {
            data: *data*
        };
    },

this data hasn't been declared anywhere, you need to set it to a default value, maybe a null like this,

data: function() {
        return {
            data: null
        };
    },

then try setting it in the method like this

this.data = response.data

and then you can access it in the template like the way you have done already.

Also, it is advised to use Vue's $set method to keep the reactivity flow - so you can use

this.$set(this, 'data', response.data);

to set the data.

answered Jul 2, 2021 at 19:11

ravvis

1451 silver badge4 bronze badges

Comments

Cameron · Accepted Answer · 2021-07-02 21:00:56Z

0

change this

 data: function() {
        return {
            data: data
        };
to 
 data: function() {
        return {
            data: null
        };

change creataed() to mounted()

add

this.data = response.results;

in your getQuestions() in place of your return(data = response.results); I think you can also kill the .then(response => response.json())

in your vue template you can do

<div>
<template v-if="data"> {{data.somefield}}<template>
</div>

The idea is you set data to null, when the component is mounted you "fetch" data and save it to the data property. Vue sees that the data is no longer null and shows you data.somefield

answered Jul 2, 2021 at 21:00

Cameron

5543 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to return data from method in Vue.js?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related