CODEWITHSUNDEEP
vue-componentvue.js
donnyjeremiah
donnyjeremiah

Reputation: 287

undefined error in v-show vue

In my Vue 2.0 .vue component file, I've got two 'conditions' and based on when they become true, I show them to the user. I have a button to toggle 

<tr v-show="showMonth" v-for="player in players">
  <td><input type="checkbox"></td>
  <td>{{ player.name }}</td>
  <td>{{ player.stats.month.goals }}</td>
  <td>{{ player.stats.month.assists }}</td>
  <td>{{ player.stats.month.played }}</td>
</tr>
<tr v-show="showYear" v-for="player in players">
  <td><input type="checkbox"></td>
  <td>{{ player.name }}</td>
  <td>{{ player.stats.year.goals }}</td>
  <td>{{ player.stats.year.assists }}</td>
  <td>{{ player.stats.year.played }}</td>
</tr>

Keep in mind that each <tr>...</tr> will be populated(get data from api) only when a use 'toggles' the showYear or showMonth. Now the problem arises when showYear is toggled then player.stats.month which is required in the showMonth <tr>...</tr> throws the error "player.stats.month is undefined". Is there anyway I can get around this?

Upvotes: 0

Views: 971

Answers (1)

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13664

Replace v-show with v-if and it will work as it will render only when it should. v-show changes only visibility, when v-if putting it into DOM only when true.

Upvotes: 3

Related Questions