Метод Vue возвращает неопределенный при использовании в другом методе - PullRequest
Новая
       12

Метод Vue возвращает неопределенный при использовании в другом методе

0 голосов
/ 07 января 2019

Я пытаюсь получить ответы на комментарий в объекте. Из бэкэнда, то есть LARAVEL я получаю 1 предмет. Но в Vue оно становится неопределенным

Метод 

fetchReplies(commentid) {
  axios
    .get("/reply/" + commentid)
    .then(res => {
      if (res.data != null) {
        console.log(res.data);
        return res.data;
      }
    })
    .catch(function(err) {
      console.log(err);
    });
}

Мощно

(2) [{…}, {…}] // для комментария 42

Но при использовании этого метода в каком-то другом методе 

fetchComments() {
  var boardid = this.boardid;
  axios
    .get("/comment/" + boardid)
    .then(res => {
      if (res.data != null) {
        this.comments = res.data;
           console.log(this.fetchReplies(42));
        }

    })
    .catch(function(err) {
      console.log(err);
    });
},

1020 Мощн * *

Не определено

Через некоторое время, когда я выбираю в Vue, я получаю 1 объект с данными и один без данных. Но вдруг этот объект без данных исчезает.

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Ваш console.log(this.fetchReplies(42)); вызывает функцию, которая все еще работает как axios в асинхронном режиме

Если вы сделаете свой fetchComments async function, вы можете подождать, пока ваш fetchReplies не закончится, прежде чем что-то регистрировать.

Добавлен фрагмент кода, убедитесь, что axios также что-то возвращает. 

let results = await this.fetchReplies(42)
console.log(results)


const URL = 'https://jsonplaceholder.typicode.com/posts';
    new Vue({
        el: "#app",
        data: {
            comments : '',
            replies : ''
        },
        methods: {
            fetchReplies(id) {
                return new Promise((resolve, reject) => {
                    axios
                        .get(URL)
                        .then(res => {
                            if (res.data != null) {
                                resolve(res.data)
                            } else {
                                reject('RejectReason')
                            }

                        })
                        .catch(function (err) {
                            console.log(err);
                            reject(err)
                        });
                })
            },
            async fetchComments() {
                axios
                    .get(URL)
                    .then(async res => {
                        if (res.data != null) {
                            //Result from comments is in
                            this.comments = res.data;
                            let replies = await this.fetchReplies(1);
                            this.replies = replies;
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        }
    })
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="fetchComments()">
        Some text
    </button>
    <h1>Comments</h1>
    {{comments}}
    <h2>Replies</h2>
    {{replies}}
</div>

Обновление: Изменение фрагмента для видимого изменения данных в шаблоне

0 голосов
/ 07 января 2019

Axios - это асинхронный вызов, поэтому кажется, что console.log вызывается до того, как возвращается вызов fetch. Самый удобный способ использовать axios - вызывать его с помощью es2017 async / await.

...