Vue 3 with Vue Router: Router links have correct Vue param but not reflected in HTML

Question

My single page app retrieves organization data from an Express endpoint and lists the different organizations available to the logged in user account.

getUser is a vuex getter. The list of organizations prints fine. The code below displays the organization slug (org.slug) as a parameter on the router-link for each organization when I check in the Vue inspector plugin.

But the compiled html (dev mode) fails to reflect the individual slug parameter. All the links display the same a href="..." element, pointing to the first organization slug in the array, at index 0.

It's only the org.slug value that is repeated in the v-for loop/list. The org.name and org.id are correct.

<li v-for="org in getUser.organizations" :key="org.id">
    <router-link :to="{ name: 'dashboard', params: org.slug }">
      {{ org.name }}
    </router-link>
</li>

In the Vue inspector:

props
    ariaCurrentValue:"page"
    custom:false
    to:Object
      name:"dashboard"
      params:"my-organization-0" // this changes to -1, -2, etc depending on the list item in the list

Vue Router:

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: { publicRoute: true }
  },
  {
    path: '/:slug/dashboard',
    name: 'dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */'../views/Dashboard.vue')
  },
  {
    ...etc.
  }
]

Do any of you see what I'm doing wrong? Thanks for your advice!

Answer 1

To pass a variable to a route, you need to provide its value in params object. So it would be like:

:to="{ name: 'dashboard', params: { slug: org.slug } }">

Reference: API Documentation