samedi 28 septembre 2019

Referencing element from other class in Vue.js

I've got a checkbox in my Players.vue:

<div class="row">
   <div class="d-inline col-lg-6 col-md-6 col-sm-6">
      <b>Scholarship Player</b>
   </div>
   <div class="d-inline col-lg-6 col-md-6 col-sm-6">  
      <input type="checkbox" id="checkbox" v-model="players.Scholarship"> </div>
</div>

Checkbox

When the checkbox is checked (true), then another tab should open.

The problem is that the way I reference players.Scholarship in my other class PlayerTabs, it doesn't seem to work. I get a TypeError:

Cannot read property 'Scholarship' of undefined

Can someone tell me how I have to reference the players.Scholarship (or whether my if itself is false)? (I'm new to Vue.js)

<div v-if="Scholarship">
    <v-tab title="Scholarship">
      <app-timetables></app-timetables>
    </v-tab>
</div>
<div v-else>
</div>

Scholarship itself is in an array of players in my TeamInfos.vue class:

playersData: function(data) {
  this.players = [];
  var $this = this;
  for (var i = 0; i < data.length; i++) {
    $this.players.push({
      ID: data[i].ID,
      PlayerID: data[i].NameId,
      Scholarship: data[i].Scholarship
      // others
    });
  } 
},



Aucun commentaire:

Enregistrer un commentaire