I'm currently in the process of developing a Vue application that interacts with Spotify's API to search for tracks. However, I've encountered an issue where I receive the following error message:
Uncaught (in promise) TypeError: searchTracks is not a function
Every time I attempt to call the searchTracks function. Despite my efforts to find a solution, I haven't been successful. I have the code for accessing Spotify's API in a separate file called useSpotify.js
import { ref } from 'vue'
const useSpotify = async () => {
let token
const id = 'MyId'
const secretId = 'mySecretId'
const res = await fetch('https://accounts.spotify.com/api/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + btoa(id + ':' + secretId)
},
body: 'grant_type=client_credentials'
});
token = await res.json();
console.log(token);
const searchTracks = async (searchTerm) => {
console.log(token)
const res = await fetch(`https://api.spotify.com/v1/search?${searchTerm}&type=track`, {
method: 'GET',
headers: { 'Authorization': 'Bearer ' + token }
});
const data = ref(null)
data.value = await res.json()
console.log(data.value)
return data.value
}
return { searchTracks }
}
export default useSpotify
Inside the vue component (Login.vue), I'm attempting to integrate it just to test it out. You can refer to //searchTry to view the coding done for this attempt
<template>
<form @submit.prevent="handleLoginSubmit">
<h3>Login</h3>
<input type="email" placeholder="Email" v-model="email" />
<input type="password" placeholder="Password" v-model="password" />
<div class="error" v-if="error">{{error}}</div>
<button v-if="!isPending">Login</button>
<button v-if="isPending" disabled>Loading..</button>
</form>
<input type="text" v-model="searchTerm">
<button @click="search">search</button>
</template>
<script>
import useLogin from "@/composables/useLogin";
import { ref } from '@vue/reactivity';
import { useRouter } from 'vue-router';
// searchTry
import useSpotify from '../../composables/spotifyApi/useSpotify'
// searchTry
export default {
setup() {
const {error, isPending, login} = useLogin()
const router = useRouter()
const email = ref('')
const password = ref('')
const handleLoginSubmit = async () =>{
const res = await login(email.value, password.value)
if(!error.value){
router.push({name: 'UserPlaylists'})
}
}
// search try
const searchTerm = ref('')
const {searchTracks} = useSpotify()
const search = async () =>{
const res = searchTracks(searchTerm.value)
}
// search try
return{email, password, isPending, error, handleLoginSubmit, searchTerm, search}
},
};
</script>
<style>