使用 vue 和 laravel 從另一個 api 獲取信息

Question

您好，我正在尋找一個通過 object 路由的選項，然后獲取有關它的相關信息。 我在 vue 中比較新。 選擇特定組件后，程序應該創建一個音頻播放器。 並且在該音頻播放器中，它應該播放該季節內的所有相關曲目。 現在我到播放器的路由有效，但我無法獲取播放器的數據，因為我的 API axios function 沒有安裝，但我猜我沒有安裝很多安裝的東西，但我猜我沒有嘗試安裝很多東西。 我使用 Laravel 8 和 Vue 3 Vue-router 版本是 4。

這是我加載音頻列表的組件。

    <template>
<!--    <div v-if="isLoading" class="flex items-center justify-center mt-9"><LoaderSpinner size="150px"></LoaderSpinner></div>-->
    <div v-if="!isPlayerVisible">
        <div class="text-white font-bold text-center text-2xl mb-4 mt-3 uppercase">
            <p>Podcast Oemus Tracks {{id}}</p>
                <p></p>
        </div>
        <div class="text-white flex flex-row justify-between mb-4 cursor-pointer" v-for="(song, songIndex) in Examplelist" v-bind:key="song.id" v-on:click="playSong(songIndex)">
            <div>
                <span class="">{{song.title}}</span>
                <br>
                <span class="text-xs text-gray-400">{{song.description}}</span>
            </div>
            <div>
            <div v-for="track in tracks">
                <p>{{track.id}}</p>
            </div>

            </div>
        </div>
    </div>
    <div v-if="isPlayerVisible">
        <SongPlayer
            v-bind:song="Examplelist[currentSongIndex]"
            @goback="isPlayerVisible = !isPlayerVisible"
            @next="playNext"
            @previous="playPrevious"
        />
    </div>
</template>

<script>
import SongPlayer from "./SongPlayer";

export default {
    name: "SongList",
    components: {
        SongPlayer,
    },
    data() {
        return {
            currentSongIndex: 0,
            isPlayerVisible: false,
            id: this.$route.params.id,
            tracks: null,
            isLoading: true,
            Examplelist: [
                {
                    id: 1,
                    title: 'Episode 1: Regen',
                    description: 'Beschreibung des Tracks',
                    src: '/uploads/thumbnail/61dfe0446b3738825c1bcc50dd.jpg',
                    srcSong: '/uploads/tracks/61dfe051e939bd81438dbed0ad.mp3'
                },
                {
                    id: 2,
                    title: 'Episode 2: Schnee',
                    description: 'Beschreibung des Tracks',
                    src: '/uploads/thumbnail/61dfe0446b3738825c1bcc50dd.jpg',
                    srcSong: '/uploads/tracks/61dff6d09d9dff33787d6dc8eb.mp3'
                },
                {
                    id: 3,
                    title: 'Episode 3: hagel',
                    description: 'Beschreibung des Tracks',
                    src: '/uploads/thumbnail/61dfe0446b3738825c1bcc50dd.jpg',
                    srcSong: '/uploads/tracks/61dff6a7bc0bcccd0f92814b4f.mp3'
                },
            ]
        }
    },
    methods: {
        playSong(index) {
            this.currentSongIndex = index
            this.isPlayerVisible = true
        },
        playNext() {
            if (this.currentSongIndex < this.tracks.length - 1) {
                this.currentSongIndex += 1
            } else {
                this.currentSongIndex += 0
            }
        },
        playPrevious() {
            if (this.currentSongIndex !== 0) {
                this.currentSongIndex -= 1
            } else {
                this.currentSongIndex -= 0
            }
        },
        mounted() {
            const getTracks = async (id) => {
                await axios.get(`http://****-****-***.test/api/seasons/${id}/tracks`).then(response => {
                    this.tracks = response.data.data
                    console.log('already mounted')
                }).catch(error => {
                    console.log(error)
                }).finally(() => this.isLoading = false)
            }
            getTracks(this.id)
        }
    },
}
</script>

這些是我的路線

import SeasonComponent from "./components/Main/SeasonComponent";
import Track from "./components/Track/Track";

export const routes = [
        {
            path: '/',
            component: SeasonComponent
        },
        {
            path: '/season/:id',
            component: Track,
        },
    ]

這是我加載音頻播放器的組件。

<template>

    <div>
        <div v-if="isLoading" class="flex items-center justify-center mt-9"><LoaderSpinner size="150px"></LoaderSpinner></div>
        <div class="grid grid-cols-3 gap-8 justify-items-center p-6">
            <div v-for="season in seasons" :key="season.id" class="border-2 border-black p-2 rounded-[50px]">
                <router-link  :to="'/season/' + season.id">
                    <div  class="bg-black rounded-[50px]">
                        <div class="img-div" @mouseover="mouseOver" @mouseleave="active = false" :style=" {
                            backgroundImage: `url('/uploads/thumbnail/${season.thumbnail}')`,
                            width: '500px',
                            height: '300px',
                            backgroundSize: 'cover',
                            backgroundPosition: 'center',
                            border: '2px solid black',
                            borderRadius: '50px',
                            opacity: '.6',
                            zIndex: '1',
                            }">
                        </div>
                        <div v-show="active" class="div absolute bg-black transition text-white">
                            <p>{{season.name}}</p>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import LoaderSpinner from "../Assets/LoaderSpinner";
export default {
    name: "SeasonComponent",
    components: {LoaderSpinner},
    props: {
        img: String,
    },
    data() {
        return {
            seasons: null,
            isLoading: true,
            active: false,
        }
    },
    methods: {
      mouseOver() {
          const imgSeason = document.querySelectorAll('.img-div')
          console.log(imgSeason)
          for (let i = 0; i < imgSeason.length; i++) {
              if(event.target === imgSeason[i]) {
                  this.active = !this.active
              }
          }
      },
    },
    mounted() {
        const getSeasons = async () => {
            await axios
                .get('http://podcast-oemus-com.test/api/seasons')
                .then(response => {
                    this.seasons = response.data.data
                    console.log(this.seasons)
                }).catch(error => {
                    console.log(error)
                }).finally(() => this.isLoading = false)
        }
        getSeasons()
    },
}
</script>

而我的 app.js 就是從那里編譯的。

import {createApp} from 'vue';
import {createRouter, createWebHistory} from 'vue-router'
import Seasons from "./components/Main/Seasons";
import Tracks from "./components/Track/Track";
import {routes} from "./router";

const router = createRouter({
    history: createWebHistory(),
    routes: routes,
})


const app = createApp({
    components: {
        Seasons,
        Tracks,
        routes
    },
})
app.use(router)
app.mount("#app")

和 api 路線。

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});
Route::get('/tracks', [ApiTracksController::class, 'index']);
Route::get('/topics', [ApiTopicsController::class, 'index']);
Route::get('/seasons', [ApiSeasonController::class, 'index']);
Route::get('/seasons/{id}/tracks', [ApiSeasonController::class, 'trackShow']);
Route::get('/speakers', [ApiSpeakerController::class, 'index']);

如果您對如何更好地做到這一點有任何建議，我將不勝感激。 提前致謝。

Answer 1

我已經知道了，我沒有意識到我安裝的鈎子在我的方法中。 僅僅一件簡單的事情就花了大約 2 個小時，所以@all 正確地閱讀了你的代碼:)。

  methods: {
        playSong(index) {
            this.currentSongIndex = index
            this.isPlayerVisible = true
        },
        playNext() {
            if (this.currentSongIndex < this.tracks.length - 1) {
                this.currentSongIndex += 1
            } else {
                this.currentSongIndex += 0
            }
        },
        playPrevious() {
            if (this.currentSongIndex !== 0) {
                this.currentSongIndex -= 1
            } else {
                this.currentSongIndex -= 0
            }
        }, ↓ Here was the mistake
    },
    mounted() {
        const getTracks = async (id) => {
            await axios.get(`http://podcast-oemus-com.test/api/seasons/${id}/tracks`).then(response => {
                this.tracks = response.data.data
                console.log('already mounted')
            }).catch(error => {
                console.log(error)
            }).finally(() => this.isLoading = false)
        }
        getTracks(this.id)
    }