How to display/highlight the respective option with respect to the $route.params.id in vs-select in the context of VueJS

问题

I am displaying multiple options coming from the API in vs-select.

ComponentA.vue

    ....
    <div class="content-right">
        <vs-button class="btn" @click="$router.push({name: 'ProjectWorld', params: {uid: out.uid.toString() }}).catch(err => {})">Open Lab</vs-button>
    </div>
    ....

    created (){
         this.$http.get('/my-project')
        .then((res) => {this.out= res.data})
         .catch((e) => {console.log(e)})
    }

I am using cards in the first page and each card has Open Lab button, so which ever button the user clicks it goes to the respective uid, suppose if the user clicks the button of the 1st card then it displays uid = 1's content.

Here is the link that i have asked about displaying multiple options:

How to create a multiple options from a single data coming from the API for displaying it as a select/dropdown in VueJS

Here is the response:

[
          {
            "uid": 1,
            "choices": "project_title1|project_title2|project_title3",
            "age": "35",
            "country": "india"
          },
          {
            "uid": 2,
            "choices": "project_title2",
            "age": "25",
            "country": "australia"
          } 
          ...
    ]

ComponentB.vue

<div id="app">
  <div v-for="(entry, index) in entries">
    <vs-select v-model="out.selection">
      <vs-select-item :key="index"
                      v-bind="item"
                      v-for="(item,index) in makeSelectOptions(out.choices)" />
    </vs-select>
  </div>
  <div v-if="selection === project title1"> Hello world from Title1</div>
  <div v-if="selection === project title2"> Hi from Title2</div>
  <div v-if="selection === project title3"> Welcome from Title3</div>
</div>
...
selection: null // suppose if i say selection: 'project_title1' the option is highlighted and then it shows its contents, but if Open Lab is clicked in 2nd card then uid is 2 but even here the project_title1 is shown rather i want to highlight the project_title2 here, so that means the option of any uid must highlight the first option.
...
methods: {
    makeSelectOptions(choices) {
      return choices.split('|').map(value => ({
        text: value,
        value
      }))
    }

My question: How do I show the option highlighted, suppose say the user has clicked Open Lab in the second card then the uid2's contents are displayed, in vs-select it remains empty initially and then only on clicking the option the contents are displayed. Rather i want to highlight the option intially and show its content.

来源：https://stackoverflow.com/questions/65930807/how-to-display-highlight-the-respective-option-with-respect-to-the-route-params

标签

Vue.js

option