vue.jsでコンソールに出力する処理の無限ループの原因が知りたい。

Question

前提・実現したいこと

コンソールに出力する処理の無限ループの原因が知りたい。

発生している問題・エラーメッセージ

vue.jsでDBのpostsテーブルのレコードを取得して、レコードに登録されているユーザーIDを元にuserテーブルからユーザープロフィールを取得しています。
しかし、デバッグ用にコンソールに出力している処理が止まらずに延々と出力し続けています。

該当のソースコード

<template>
    <div class="row justify-content-center">
        <div class="col">
            <ul class="p-0">
                <div v-if="isset(posts) && empty(posts)">
                    <div v-for="post in posts">
                        {{ getProfile(post.user_id) }}
                        <li>li</li>
                    </div>
                </div>
                <div v-else>
                    <li>投稿はありません</li>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "posts-component",
    data: function() {
        return {
            user_name: "",
            user_img: "",
            user: [],
            posts: []
        };
    },
    methods: {
        getPosts() {
            const url = "/ajax/post";
            axios.get(url).then(response => {
                this.posts = response.data;
            });
        },
        getProfile(id) {
            const url = "/ajax/user/";
            axios.get(url + id).then(response => {
                this.user = response.data;
            });
            this.user.forEach(element => {
                this.user_img = element.profile_image;
                this.user_name = element.screen_name;
            });
            console.log(this.user);//出力が止まらない
            console.log(this.user_name);//出力が止まらない
            console.log(this.user_img);//出力が止まらない
        },
        isset(data) {
            return typeof data != "undefined";
        },
        empty(data) {
            return data.length != 0;
        }
    },
    mounted() {
        this.getPosts();
    }
};
</script>

<?php

namespace App\Http\Controllers\Ajax;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;

class UserController extends Controller
{

    public function profile( $id )
    {
        $user = \App\User::where('id', $id )->get();

        return $user;
    }
}

補足情報（FW/ツールのバージョンなど）

postsテーブルには10個のレコードが入っています。

liの出力は10回で正常に動作しています。

Answer 1

恐らくcontrolloer側で正しくデータを取得できていない為このような現象が発生したのではないかと思われます。

別のプログラムで同じような状態になった時はcontroller側を修正したら発生しなくなりました。

Answer 2

axios部分が非同期で行われているからではないですか？

Comments

[bigbox267]

昨日一日やってみたのですが解決できなかったので質問いたします。

コードを一部修正し、

<div v-for="post in posts">
{{ getProfile(post.user_id) }}
{{ setProfile() }}
<li>li</li>
</div>

async getProfile(id) {
try {
const url = "/ajax/user/";
await axios.get(url + id).then(response => {
this.user = response.data;
});
} catch (error) {
console.log(error);
}
},
setProfile() {
this.user.forEach(element => {
this.user_img = element.profile_image;
this.user_name = element.screen_name;
});
console.log(this.user_img + this.screen_name);//一定周期で20回ずつ出力している
},

このように変更しました。

getProfile()のみの場合はループは発生せず、setProfile()を記入するとループが発生します。

これは同期処理を行う箇所が間違っているのでしょうか？