VueJS gives Uncaught (in promise) Error: Missing required param "name", in vue-router, but the param is there

Question

<v-window v-model="tab">
    <v-window-item value="one" style="height: 50vh;">
        <div class="pa-3">
            <v-table>
                <thead>
                   <tr>
                       <th class="text-left">Game</th>                                            
                   </tr>
                </thead>
                <tbody>
                    <tr v-for="game in games" :key="game">                                                                                    
                    <td>
                       <router-link :to="{name: 'Play', params: { name: username.name, mdbid: username.id, starter: true } }">
                       <v-btn color="primary" @click="currentGame = Cards">Jogar</v-btn>
                       </router-link>                
                    </td>
                </tr>
            </tbody>
        </v-table>
    </div>
    </v-window-item>
        
</v-window>

Why the first loop gives this error, if is the same as the second one, except is false in the last param, and complains about the name param?

The router:

{ 
      path: '/play/:name/:mdbid/:starter',
      component: Play,
      name: 'Play',
      meta: {
          title: 'Play'
      }
    }

Why it works on the second loop, but it crashes the app in the first loop? Any hints?

Answer 1

The primary difference between the two loops is that in the second loop you have a v-if condition that checks for the existence of username before rendering the . This suggests that username may be null or undefined at some point, and that's likely the cause of your error:

Just add if statement to first loop as well:

<router-link v-if="username && username.name" :to="{name: 'Play', params: { name: username.name, mdbid: username.id, starter: true } }">
    <v-btn color="primary" @click="currentGame = Cards">Jogar</v-btn>
</router-link>