Hey im building an podcast website with vue and laravel i want to get an different inlay player in another website via i frame so thats, but now i created for that a new route in laravel and vue-router but everytime i use my functions it says id is not defined. Im doing it with composition api.
this is my function which i import from another file
import {ref} from "vue";
export default async function useSeasons() {
const seasons = ref([])
async function getSeasons(id) {
let response = await axios.get(`/api/seasons/${id}/tracks`)
seasons.value = response.data.data
}
return {
seasons, getSeasons
}
}
This is my function in the Template…
<script>
import useSeasons from "../../getSeasons";
import {onMounted} from "vue";
export default {
name: "Player",
props: {
id: {
type: String,
required:true,
}
},
setup(props) {
const {seasons, getSeasons} = useSeasons()
console.log(id)
onMounted(getSeasons(props.id))
return {
seasons,
getSeasons
}
}
}
</script>
And the adjustment for the router
export const routes = [
{
path: '/',
component: SeasonComponent
},
{
name: 'track.show',
path: '/season/:id',
component: Track,
},
{
path: '/player/:id',
component: PlayerBlack,
props: true,
},
]
An Update im getting the id send as an prop state but tzhen it gives me an warning.
[Vue warn]: Unhandled error during execution of setup function at <PlayerBlack id=“5” onVnodeUnmounted=fn ref=Ref< undefined > > at at at app.js:16911:17
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at Vue Issue Helper at <PlayerBlack id=“5” onVnodeUnmounted=fn ref=Ref< undefined > > at at at