Vue prop from optional router param is empty string instead of default value

Question

I'm trying to pass an optional parameter clientId to my component from the route:

//router.js
{
   path: "/new-services-request/:clientId?",
   name: "NewServicesRequest",
   component: () => import("../views/ServicesRequest/NewServicesRequest.vue"),
   props: true
},

In my component I have:

//NewServicesRequest.vue
const props = defineProps({
  clientId: {
    type: String,
    required: false,
    default: "0"
  }
});

Now, in my layout when I click the link to="/new-services-request" the page loads but the props.clientId is empty string "" rather than "0". Any help?

Answer 1

You'll need to explicitely pass undefined or null param in this case.

<router-link :to="{ name: 'NewServicesRequest', params: { clientId: id } }">

const id = ref(undefined)  // able to programmatically set to whatever value