Vue.js×Laravelでお気に入りボタンを実装したい

Question

前提・実現したいこと

Vue×Laravelでお気に入りに追加ボタンを実装したいと思っています。
likeテーブルからユーザーIDが一致するものをaxiosで取得→dataに格納し、
post_idが一致するものがある場合はisLike=trueを返し、v-ifでお気に入りボタンの表示/非表示を切り替えたいと考えています。

Likeテーブル

id	user_id	post_id

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

下記のコードで実行すると、コンソールに「self.likes.find is not a function」と表示され、ボタンが表示されなくなってしまいます。
chromeのVueツールで確認したところ、dataにlikesを格納するまではできているのですが、isLikeが「isLiked:"(error during evaluation)"」とエラーになっています。

▼computed:
isLiked:"(error during evaluation)"

self.likes.find is not a function

Ajax\PostsController

 public function index()
    {
        return Post::with('likes')->get();
    }

Ajax\LikesController

public function index()
    {
        $user_id = Auth::id();
        $likes = Like::where('user_id', $user_id)->get();
        return $likes;
    }

home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <post-component :user="{{ $user }}"></example-component>
   </div>
</div>
@endsection

PostComponent.vue

<template>
    <div class="col-md-7" v-for="post in posts" v-bind:key="post.id">
　　　　<like-component :card="post.id" :user="post.id" :like="post.likes.id"></like-component>
    </div>
</template>
<script>
    export default {
        props: {
            user: {
              type: Object,
            },
        },
        data: function(){
            return{
                posts: {}
            }
        },
        mounted() {
            var self = this;
            var url = '/ajax/posts';
            axios.get(url).then(function(response){
                self.posts = response.data;
                });
            }
    }
</script>

LikeComponent.vue

<template>
    <button type="button" v-if="isLiked" class="btn btn-primary" @click="addLike">お気に入りに登録</button>
    <button type="button" v-else class="btn btn-secondary" @click="deleteLike">お気に入りから外す</button>
</template>
<script>
    export default {
        props: {
            user: {
              type: Number,
            },
            post: {
                type: Number,
            },
        },
        data: function(){
            return{
                likes: {}
            }
        },
        computed: {
          isLiked: function(){
              var self = this;
              var post_id = self.post;
              var like = self.likes.find((like) => {
                  return (like.post_id === post_id)
              });
            }
        },
        methods: {
            addLike: function(){
                var self = this;
                var post_id = self.post;
                var url = '/ajax/likes/add';
                axios.post(url, {
                    post_id: post_id
                }).then(function(response){
                    console.log(self.post)
                })
            },
            deleteLike:function(){
                var self = this;
                var post_id = self.post;
                var url = '/ajax/likes/delete';
                axios.post(url, {
                    post_id: post_id
                }).then(function(response){
                    console.log(self.post)
                })
            },
          　findLikeId: function(){
                var self = this;
                var post_id = self.post;
                var likes = self.likes.find((like) => {
                    return (like.post_id  === post_id)
                });
                if(like){ return like.id }
                console.log(like) // 何も表示されない

            }
        },
        mounted() {
            var self = this;
            var url = '/ajax/likes';
            axios.get(url).then(function(response){
                self.likes = response.data;
            });
        }
    }
</script>

試したこと

エラーログからfindの使い方に何か問題があるのかと思い、使い方を調べ直したりしたのですが、
cosole.log(like)をしても表示されず、行き詰まってしまいました。

解決のヒントをいただけないでしょうか？

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

Laravel：6.0.3
vue: 2.5.17

Answer 1

■self.likes.find is not a functionの原因
恐らくself.likesが空オブジェクトだからかと思います。
（通信して取得完了までにisLikedが実行されているが、初期状態だとlikesは{}つまり空オブジェクトなのでfind出来ない）

■(error during evaluation)の原因
isLikedメソッドが結局何も返していないのでreturn like;が必要かと思います。

■console.logが表示されない原因

• そもそもfindLikeIdメソッドが呼ばれていないのでは？（少なくともこのコード内には呼び出し側が存在しない）
• findLikeId内で変数likeは定義されていないのでどっちにしろエラー（多分likesが正しい）
• findLikeId内で（変数likeはlikesだとした場合）likesが存在していたらreturnするので、console.logが呼ばれるのはlikesがfalseになる場合のみ（likesが存在していたらconsole.logまで到達しない）

Comments

[makiri2002]

ありがとうございます！！mountedに設定していたgetをcreatedに変更し、findLikeIdの中の変数定義を修正、computedのlikesを{ }→[ ]に変更したところ、動くようになりました！！
通信して取得完了するタイミングのことが全く頭になかったので、本当に助かりました。
ありがとうございました！！

[makiri2002]

最終的にはこちらで動きました。

**LikeComponent.vue**
<template>
<button type="button" v-if="!isLiked" class="btn btn-primary" @click="addMyCard">お気に入りに登録</button>
<button type="button" v-else class="btn btn-secondary" @click="deleteMyCard">お気に入りから外す</button>

</template>

<script>
export default {
props: {
user: {
type: Number,
},
post: {
type: Number,
},
},
data: function(){
return{
likes: []
}
},
computed: {
isLiked: function(){
if(this.likes.length === 0){ return false }
return Boolean(this.findLikeId())
}
},
created: function(){
this.fetchLikes().then(result => {
this.likes = result
})
},
methods: {
fetchLikes: function(){
var self = this;
var url = '/ajax/likes';
axios.get(url).then(function(response){
self.likes = response.data;
});
},
addMyCard: function(){
var self = this;
var post_id = self.post;
var url = '/ajax/likes/add';
axios.post(url, {
post_id: post_id
}).then(function(response){
self.likes = response.data;
})
},
deleteMyCard:function(){
var self = this;
var post_id = self.post;
var url = '/ajax/likes/delete';
axios.post(url, {
post_id: post_id
}).then(function(response){
self.likes = response.data;
})
},
findLikeId: function(){
var self = this;
var post_id = self.post;
var user_id = self.user;
var like = self.likes.find((like) => {
return (like.post_id === post_id)
});
if(like){ return like.id }
console.log(like)

}
},
}
</script>

Answer 2

最終的にはこちらで動きました。

LikeComponent.vue
<template>
<button type="button" v-if="!isLiked" class="btn btn-primary" @click="addMyCard">お気に入りに登録</button>
<button type="button" v-else class="btn btn-secondary" @click="deleteMyCard">お気に入りから外す</button>

</template> <script> export default { props: { user: { type: Number, }, post: { type: Number, }, }, data: function(){ return{ likes: [] } }, computed: { isLiked: function(){ if(this.likes.length === 0){ return false } return Boolean(this.findLikeId()) } }, created: function(){ this.fetchLikes().then(result => { this.likes = result }) }, methods: { fetchLikes: function(){ var self = this; var url = '/ajax/likes'; axios.get(url).then(function(response){ self.likes = response.data; }); }, addMyCard: function(){ var self = this; var post_id = self.post; var url = '/ajax/likes/add'; axios.post(url, { post_id: post_id }).then(function(response){ self.likes = response.data; }) }, deleteMyCard:function(){ var self = this; var post_id = self.post; var url = '/ajax/likes/delete'; axios.post(url, { post_id: post_id }).then(function(response){ self.likes = response.data; }) }, findLikeId: function(){ var self = this; var post_id = self.post; var user_id = self.user; var like = self.likes.find((like) => { return (like.post_id === post_id) }); if(like){ return like.id } console.log(like) } }, } </script>