how binding value on params router-link in vue 3?-CodePudding

Hi sorry for my noob question. I need binding params value of router-link. i search a lot and i think it's correct my code but don't work.

<router-link :to="{name: 'registro-new', params: {id: cliente.id}}">registro </router-link>

this is the error in console.log

[Vue warn]: Unhandled error during execution of setup function 
  at <RouterLink to= 
Object { name: "registro-new", params: {…} }

name: "registro-new"

params: Object { id: undefined }

<prototype>: Object { … }
 > 
  at <Cliente onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <Dashboard onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView key="/cliente/1" > 
  at <App> runtime-core.esm-bundler.js:6873:16

i think that cliente.id it's null but if I write {{cliente.id}} inside to div i get the value.

if i put manually a number like this my route work

<router-link :to="{name: 'registro-new', params: {id:1}}">registro </router-link>

so i don't kwnow really where is my bad. Can someone help me please?

CodePudding user response：

It looks like at the rendering the client id had not been available yet, so add a condition to render the router link when the id is ready v-if="cliente.id" :

<router-link v-if="cliente.id" :to="{name: 'registro-new', params: {id: cliente.id}}">
  registro 
</router-link>