配列のデータの絞り込み表示[nux.js]

Question

nuxt.js larvelを使用して、一覧表示画面でpostテーブルのnameカラムを表示させたいのですが、表示できません。
nuxt.jsの{{post}}と記述すると、postテーブルの一覧が表示されるのですが、{{post.name}}と記述すると、なにも表示されません。アドバイスをいただきたいです。
よろしくお願いします。

<template>

  <v-row justify="center">
      <h2>URLパラメータ取得結果：route.params</h2>
      {{ this.$route.params.id }}<br>　
      {{post.name}}　　　
  </v-row>
  
</template>

<script>
import axios from 'axios';
export default {
  created(){
  axios.get(`http://127.0.0.1:8000/api/top/${this.$route.params.id}`)
          .then(response => {
          this.post = response.data.post
          
          this.id = response.data.id
          this.name= response.data.name
          console.log(response.data)
          });
          
  },
  data () {
    return {
     params:'',
     post:[],
     posts:[],
     id:'',
     name:'',
     content:'',
    }
  },
  methods: {
    returnPage() {
      this.$router.go(-1);
    },
  }
}
</script>

PostController.php

public function find(Request $request,$id)
{
  $post= Post::where('category_id',$request->id)->get();

  return response()->json(['post'=>$post],200);
}

Laravel api.php

Route::get('/top/{id}','PostController@find');

Comments

[phper.k]

PostController の find メソッドってどういう意図で書いたものですか？

[退会済みユーザー]

返信ありがとうございます。
categoryテーブルの値に対して、postテーブルにcategory_idというカラムを設定しています。検索ページでcategoryテーブルの値についてのセレクトボックスを作成しており、セレクトボックスの値をを選択後、一覧画面に遷移し、urlパラメーターとしてidを受け渡し、ページ遷移するようになっており、受け渡したidに一致するcategory_idを含むpostテーブルの値の一覧を表示するようにfindメソッドを書きました。

Answer 1

$post= Post::where('category_id',$request->id)->get();

return response()->json(['post'=>$post],200);

ここで返却されるのはpostの配列です。
やりたい事がpost単体の表示だけか、複数のpostの表示かわかりませんが
前者ならLaravelで->get()ではなく、->first()で単体の取得
後者ならNuxtでv-forでループして表示するようにしましょう

Comments

[退会済みユーザー]

this.post = response.data.post→this.post = response.data.postsに変更し、
Nuxtで<li v-for="post in posts">{{post.name}}</li>に書き換えると表示できました。
ありがとうございます????‍♂️