Seeking advice on dynamically changing routing details in a search component based on user selection from a dropdown menu.
Home.vue Components
<h4>Search for {{searchObj.whatSearch}}</h4>
<input type="text" placeholder="Search..." v-model='searchObj.searchString'>
<select name="searchOption" id="searchOption" v-model='searchObj.whatSearch'>
<option :value="'songs'">Song</option>
<option :value="'artists'">Artist</option>
<option :value="'albums'">Album</option>
</select>
</div>
<button @click="getMusic(searchObj)">Searchk</button>
//importing the Searchcomponent here
<div v-if="ifSearched">
<search-result/>
</div>
<script>
import SearchResult from './SearchResult.vue'
export default {
data(){
return{
ifSearched: false,
searchObj:{
whatSearch: 'songs',
searchString: '',
},
}
},
components:{
SearchResult,
},
methods:{
async getMusic(searchObj){
this.ifSearched = true
return await
this.$store.dispatch('fetchYouTubeApi', searchObj)
},
},
computed:{
getYTMusic(){
return this.$store.state.musicResult.content
}
}
}
</script>
Now, I am trying to modify the router link in my searchComponent based on:
<select name="searchOption" id="searchOption" v-model='searchObj.whatSearch'>
<option :value="'songs'">Song</option>
<option :value="'artists'">Artist</option>
<option :value="'albums'">Album</option>
</select>
I want to change the router link to different routes. In my SearchResult component:
<div>
<h3>Search Result</h3>
<div id="searchLoop"
v-for="(result, videoId) in getYTMusic"
:key="videoId">
<router-link type="button" :to="`/musicdetails/${result.browseId}`">
<p>{{result.name}}</p>
</router-link>
</div>
</div>
<script>
export default {
computed:{
getYTMusic(){
return this.$store.state.musicResults.content
}
}
}
</script>
If the user selects songs, for example, I want to route to:
<router-link type="button" :to="`/SongDetails/${result.browseId}`">
//or /ArtistDetails
//or /AlbumDetails
Is it possible to achieve this using v-if condition?