laravel Vue.jsでのSPAの詳細ページ

Question

やりたいこと

laravelでSPAを作成しております。
その際にドリンクの詳細ページを作成したいのですが、詳細ページで個別商品データを取得が出来ません

ソースコード

<template>
  <div>
    詳細ページ
    <p>以下ドリンク個別データ</p>
    <ul>
      <li>drink name: {{ drink.name }}</li>
    </ul>
  </div>
</template>

<script>
    export default {
      props: {
            drinkId: String
        },
      data: function(){
        return {
          drink: {}
        }
      },
      methods: {
           getDrink() {
               axios.get('api/drink/' + this.drinkId)
                   .then((res) => {
                       this.drink = res.data;
                   })
                   .catch(error => {console.log(error)
				          });
           }
      },
      mounted() {
           this.getDrink();
      }
    }
</script>

  public function show($id)
  {
    return Drink::find($id);
  }

  Route::get('/drinks/{id}', 'DrinksController@show');

##　推測
{{ drink }}を表示してみてもデータが取れていないのか下記の写真のような表示になってしまうことから、そもそも個別のdrinkが取れていないと推測し、Controlleryやapp.jsで原因を探したが見つけることが出来なかった

初歩的な質問で大変申し訳ありませんが、ご教授いただけると幸いです

Answer 1

ルートのURLと、axiosからリクエストするURLが違っているのが気になります。
api/drink を api/drinks とする必要があるのではないでしょうか。

axios.get('api/drinks/' + this.drinkId)

あと、上の drinkId には値は入っていますか？