如何从 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>

Answer 1

要访问 Vue 组件上的data属性，您必须使用this访问器：

this.data = response.results

Answer 2

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.

Answer 3

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