vue.js内でaxiosにパスパラメーターを渡したい

Question

フロントエンドでVue.js、バックエンドでLaravelをしようし簡易的な飲食店予約システムを作成中です

・実装したいこと
飲食店一覧ページから「詳細を見る」ボタンを押すと選択された飲食店の詳細ページに移り、詳細が表示される

・現状
飲食店一覧ページは表示できたが、飲食店詳細ページにうまくパスパラメーターが渡らずconsole.log(responseShop)で確認したところdata内に何もデータが入ってない

おそらくパスパラメーターがきちんと渡っておらず、実装できてないと認識しております。
どのように記述すればデータが取得できるかご教授頂けますでしょうか。
以下、関連コードとなります

Home.vue

<template>
  <div class="home">
    <div class="flex">
      <div class="header left">
        <commonHeader />
      </div>
      <div class="search-container right">
        <div class="flex">
          <select name="shopsArea" id="" v-model="searchArea">
            <option value="">エリアで検索</option>
            <option value="東京">東京</option>
            <option value="大阪">大阪</option>
            <option value="福岡">福岡</option>
          </select>
          <select name="shopsGenre" id="" v-model="searchGenre">
            <option value="">ジャンルで検索</option>
            <option value="寿司">寿司</option>
            <option value="焼肉">焼肉</option>
            <option value="居酒屋">居酒屋</option>
            <option value="イタリアン">イタリアン</option>
            <option value="ラーメン">ラーメン</option>
          </select>
          <input type="text" v-model="searchWords" placeholder="店名で検索">
        </div>
      </div>
    </div>
    <div class="shops" id="shop-flex">
      <div class="shop" v-for="shop in shops" :key="shop.id">
        <img :src="shop.image_url">
        <div class="shop-info">
          <p class="shop-name">{{ shop.shop_name }}</p>
          <div class="area-genre">
            <span class="shop-area">#{{ shop.area.area }}</span>
            <span class="shop-genre">#{{ shop.genre.genre }}</span>
          </div>
          <div class="flex">
            <button @click="shopDetail(shop.id)">詳しく見る</button>
            <div class="LikesIcon" @click="toggleHeart(shop.id)">
              <i class="fa-heart LikesIcon-fa-heart" :class="{ heart: isActive , fas: isActive ,far: !isActive }"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonHeader from '../components/commonHeader';
import axios from 'axios';
export default {
  data() {
    return {
      searchArea: '',
      searchGenre: '',
      searchWords: '',
      isActive: false,
      shops: [],
    };
  },
  components: {
    commonHeader
  },
  methods: {
    // toggleHeart(sel_id) {
    //   if (sel_id) {
    //     if (!this.isActive) {
    //       this.isActive = true;
    //     } else {
    //       this.isActive = false;
    //     }
    //   }
    // },
    shopDetail(shop_id) {
      this.$router.push({path: '/shopdetail/'+ shop_id, params:{shop_id:shop_id}});
    }
  },
  // computed: {
  //   filteredShops() {
  //     const shopsArray = [];
  //     for (const i in this.shops) {
  //       const shop = this.shops[i];
  //       if (shop.area.indexOf(this.searchArea) !== -1 &&
  //       shop.genre.indexOf(this.searchGenre) !== -1 &&
  //       shop.name.indexOf(this.searchWords) !== -1) {
  //         shopsArray.push(shop);
  //       }
  //     }
  //     return shopsArray;
  //   }
  // },
  async created() {
    const responseShops = await axios.get(
      "http://localhost:8000/api/v1/shops"
    );
    console.log(responseShops);
    this.shops = responseShops.data.data;
  }
};
</script>

ShopDetail.vue

<template>
  <div class="detail">
    <commonHeader />
    <div class="flex">
      <div class="left">
        <div class="flex left-top">
          <div class="return-container">
            <div @click="returnHome()" class="return-triangle"></div>
          </div>
          <p class="top-name">{{ name }}</p>
        </div>
        <div class="shop-info">
          <img :src="url">
          <div class="flex">
            <p class="area">#{{ area }}</p>
            <p class="genre">#{{ genre }}</p>
          </div>
          <p class="overview">{{ overview }}</p>
        </div>
      </div>
      <div class="right">
        <div class="booking-container">
          <p class="booking-title">予約</p>
          <form>
            <input type="date" v-model="bookingDate">
            <select name="bookingTime" v-model="bookingTime">
              <option value="17:00">17:00</option>
              <option value="17:30">17:30</option>
              <option value="18:00">18:00</option>
              <option value="18:30">18:30</option>
              <option value="19:00">19:00</option>
              <option value="19:30">19:30</option>
              <option value="20:00">20:00</option>
              <option value="20:30">20:30</option>
              <option value="21:00">21:00</option>
            </select>
            <select name="bookingNumber" v-model="bookingNumber">
              <option value="1" disabled>1人</option>
              <option value="2">2人</option>
              <option value="3">3人</option>
              <option value="4">4人</option>
              <option value="5">5人</option>
              <option value="6">6人</option>
              <option value="7">7人</option>
              <option value="8">8人</option>
              <option value="9">9人</option>
              <option value="10">10人</option>
            </select>
          </form>
          <div class="booking-info">
            <div class="flex">
              <p class="name-item">Shop</p>
              <p class="shop-name">{{ name }}</p>
            </div>
            <div class="flex">
              <p class="name-item">Date</p>
              <p class="booking-date">{{ bookingDate }}</p>
            </div>
            <div class="flex">
              <p class="name-item">Time</p>
              <p class="booking-time">{{ bookingTime }}</p>
            </div>
            <div class="flex">
              <p class="name-item">Number</p>
              <p class="number">{{ bookingNumber }}人</p>
            </div>
          </div>
          <button @click="booking()">予約する</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonHeader from '../components/commonHeader';
import axios from 'axios';
export default {
  props: ['shop.id'],
  data() {
    return {
      shop: [],
    }
  },
  methods: {
    returnHome() {
      this.$router.push({name: 'home'});
    },
    booking() {
      this.$router.push({name: 'bookingthanks'});
    }
  },
  components: {
    commonHeader
  },
  async created() {
    const responseShop = await axios.get('http://localhost:8000/api/v1/shops/' + this.id);
    console.log(responseShop);
    // this.shop = responseShop;
  }
};
</script>

store/index.js(念の為)

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate";
import axios from "axios";
import router from "../router/index";

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [createPersistedState],
  state: {
    id: '',
  },
  mutations: {
    id(state, payload) {
      state.id = payload;
    },
    logout(state) {
      state.id = '';
    },
  },
  actions: {
    async login({ commit }, { email, password }) {
      const responseLogin = await axios.post(
        "http://localhost:8000/api/v1/users/login",
        {
          email: email,
          password: password,
        }
      );
      console.log(responseLogin);
      commit('id', responseLogin.data.id);
      
      router.replace('/home');
    },
    logout({ commit }) {
      axios
        .post('http://localhost:8000/api/v1/users/logout')
        .then((response) => {
          console.log(response);
          commit('logout');
          router.replace('/');
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
});

以上、よろしくお願いいたします

Comments

[FKM]

この場合、asyncとawaitを使用する必然性はあるのでしょうか？

[abrt29]

確かによく考えてみれば必要ないですね…

[FKM]

必要ないどころか邪魔になってるかも知れません。
コンソールで確認してみてください。

[abrt29]

asyncとawaitを外してコンソールで確認したところ、そもそもデータが取れなくなりました

[FKM]

mountedでもだめでしょうかね

[abrt29]

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config: (...)
data: (...)
headers: (...)
request: (...)
status: (...)
statusText: (...)
コンソール内このように表示されます
パスパラメーター(id)の取得方法はあっておりますでしょうか？

[FKM]

それだとデータとれてるんじゃないですかね？

[abrt29]

ご協力ありがとうございました！無事やりたいことを実装することができました。今回につきましては、自己解決として処理させていただきます。

Answer 1

下記のように記述することで無事実装できました。

<script>
import commonHeader from '../components/commonHeader';
import axios from 'axios';
export default {
  props: ['shop_id'],
  data() {
    return {
      shop: [],
    }
  },
  methods: {
    returnHome() {
      this.$router.push({name: 'home'});
    },
    booking() {
      this.$router.push({name: 'bookingthanks'});
    }
  },
  components: {
    commonHeader
  },
  async created() {
    const responseShop = await axios.get(
      'http://localhost:8000/api/v1/shops/' + this.shop_id
    );
    console.log(responseShop);
    this.shop = responseShop.data.data;
  },
};

</script>