Я изучаю Vue.js, и мне сложно найти что-либо, связанное с этой темой. Я получаю данные из API, которые правильно отображаются в console.log, но я не могу вернуть их в представление шаблона. Я не пытаюсь отправить эти данные другому компоненту; Я хочу показать это. Как добиться этого? В React я бы map получил бы результат и вернул бы HTML. Как это сделать в Vue.js? Также я делаю это в 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>
1
user15214339 2 Июл 2021 в 21:53

3 ответа

Лучший ответ

Чтобы получить доступ к свойству data в компоненте Vue, вы должны использовать метод доступа this:

this.data = response.results
2
Spooky 2 Июл 2021 в 18:58

Какие здесь данные?

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

Эти данные нигде не объявлены, вам нужно установить для них значение по умолчанию, возможно, такое значение null,

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

Затем попробуйте установить его таким способом

this.data = response.data

А затем вы можете получить к нему доступ в шаблоне, как вы это уже сделали.

Кроме того, рекомендуется использовать метод Vue $ set для сохранения потока реактивности, поэтому вы можете использовать

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

Для установки данных.

1
ravvis 2 Июл 2021 в 19:11

Изменить это

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

Изменить creataed() на mounted()

Добавить

this.data = response.results;

В вашем getQuestions () вместо вашего return(data = response.results); Я думаю, ты тоже можешь убить .then(response => response.json())

В вашем шаблоне vue вы можете сделать

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

Идея состоит в том, что вы устанавливаете для данных значение null, когда компонент монтируется, вы «извлекаете» данные и сохраняете их в свойстве data. Vue видит, что данные больше не нулевые, и показывает вам data.somefield

0
Cameron 2 Июл 2021 в 21:00