CODEWITHSUNDEEP
vue.jsvue-router
Sean Beck
Sean Beck

Reputation: 180

Passing static props and dynamic params to Vue route with multiple components

I have a Vue route I've set up to show courses in a degree program at a school.

{
  path: '/courses-by-degree/:degree',
  components: {
    sidebar: Sidebar,
    content: Grid
  },
  props: {
    sidebar: {
      title: "Fulfills",
      type: "all",
      degree: "",
      keyword: ''
    },
    content: {
      type: "degree",
      degree: "English",
      keyword: "",
      columns: {
        "Title": "title",
        "Term": "term_description",
        "Day, Time": "",
        "Format": "format",
        "Capacity": "availability"
      }
    }
  }
}

You can access this via a URL or via a Vue multiselect:

<multiselect 
  v-model="degree"
  placeholder="Select a field..."
  :options="degrees"
  @select="searchDegrees">
</multiselect>

When you select an option in the multiselect, this is called:

searchDegrees(selectedOption, id) {
  this.$root.$router.push({ path: `/courses-by-degree/${selectedOption}` });
},

My question is, how can I pass the selected option in the path to the props in the route, instead of hardcoding it to "English" as I've done above? Is this even possible/a good way to do this?

Upvotes: 3

Views: 1822

Answers (1)

Duncan Lock
Duncan Lock

Reputation: 12751

You are correct, you need to use the function to return the props. In the case of multiple named components, you can do that like this:

{
  path: '/courses-by-degree/:degree',
  components: {
    sidebar: Sidebar,
    content: Grid
  },
  props: {
    sidebar: {
      title: "Fulfills",
      type: "all",
      degree: "",
      keyword: ""
    },
  content: route => {
    return {
      type: "degree",
      degree: route.params.degree,
      keyword: "",
      columns: {
        Title: "title",
        Term: "term_description",
        "Day, Time": "",
        Format: "format",
        Capacity: "availability"
      }
    }
  }
}

Upvotes: 2

Related Questions