Блог

Главная - Вопросы по программированию - Как вернуть данные из метода в Vue.js?

Как вернуть данные из метода в Vue.js?

#javascript #laravel #vue.js

Вопрос:

Я учусь 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:

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

 this.data = response.results

Комментарии:

1. Я пробовал это, и это свойство ошибки или метод «данные» не определены в экземпляре, но на него ссылаются во время визуализации. Убедитесь, что это свойство является реактивным либо в параметре данные, либо для компонентов на основе классов, инициализировав свойство. См.: vuejs.org/v2/guide/. …

2. Вероятно, это связано с той data: data частью; вы присваиваете data значение глобальной data переменной, которой не существует. Попробуйте инициализировать его data: [] .

Ответ №2:

Что такое данные здесь?

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

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

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

затем попробуйте установить его в методе следующим образом

 this.data = response.data

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

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

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

чтобы установить данные.

Ответ №3:

измените это

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

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

Добавить

 this.data = response.results;

в ваших запросах() вместо вашего return(data = response.results);
Я думаю, что вы также можете убить
.then(response => response.json())

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

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

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

Метки: