<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?
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>