Vue vite (vuex,routing), change routing depending on dropdown search value?

user_12373612 0
Viewed 321

Looking for tips to change routing details in a searchcomponent, depending on what value the user has in a selection dropdown.

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>


//this is where I import my Searchcomponent
        <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>

And now in my searchComponent, I want to try to depending on my:

<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>

Change the routerlink to different routes. So in my SearchResult component looks like this

<div>
        <h3>SearchResult</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>

So if the user selected songs for example, I want to router link to

<router-link type="button" :to="`/SongDetails/${result.browseId}`"> 
//or /ArtistDetails
//or /AlbumDetails

And so on, is it possible to use a v-if somehow?

vue-router vuex vue.js javascript
1 Answers

I created a simple solution on how you could use a property to switch between different destinations on the same <router-link> element. The HTML could look like this:

<div>
  <select name="searchOption" id="searchOption" v-model="testProp">
    <option v-for="link in routerLinks" :value="link.value" :key="link.value">{{link.label}}</option>
  </select>
</div>
<div>
  <router-link type="button" :to="`/${testProp}`">
    <p>{{testProp}}</p>
  </router-link>
</div>

The script part would need the following properties for this example:

export default {
  data() {
    return {
      testProp: "",
      routerLinks: [
        { label: "Songs", value: "songs" },
        { label: "Artists", value: "artists" },
        { label: "Albums", value: "albums" }
      ]
    }
  }
}

In this example the value in routerLinks is your part of the url, which you want to switch according to the selected option. The selected option will be stored in testProp, which is used in <router-link> as :to value, while label from routerLinks is used inside of <router-link>.

user_131293530
Related