dimanche 29 septembre 2019

If checkbox from parent component is checked, do something in child component

I'm trying to accomplish the following: I have a checkbox in my parent component (Players.vue). If the checkbox is checked, then something should be done in the child component (PlayerTabs.vue)

Here's the relevant part of Players.vue:

<template>
  <div class="row">
      <div class="d-inline col-lg-6 col-md-6 col-sm-6">
        <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>
</template> 


<script>
import * as $ from "jquery";
import Parents from "./Details/Parents.vue";
export default {
  components: {
    appParents: Parents
  },
  data: function() {
    return {
      players: [],
      parents: [],
      characters: [],
      selectedArrayIndex: "",
      team: [],
      showInfo: false,
    };
  },
};
</script>

Here's PlayerTabs.vue:

<template>
  <div>
    <div class="row" style="margin-bottom:20px">
      <button class="btn btn-primary" @click="changeSelectedComp">Back</button>
    </div>
    <vue-tabs>
      <v-tab title="Basic">
        <app-players></app-players>
      </v-tab>
      <v-tab title="History">
        <app-histories></app-histories>
      </v-tab>
      <v-tab title="Timetable">
        <app-timetables></app-timetables>
      </v-tab>
      <div v-if="players.Scholarship">
        <v-tab title="Scholarship">
          <app-timetables></app-timetables>
        </v-tab>
      </div>
      <div v-else>
        <v-tab title="Scholarship">
          <app-timetables></app-timetables>
        </v-tab>
      </div>

    </vue-tabs>
  </div>
</template>

<script>
import * as $ from "jquery";
import Players from "./PlayerBasicInfo/Players.vue";
import Histories from "./History/Histories.vue";
//import Characters from "./History/Character/Characters.vue";
import Timetables from "./Timetable/Timetables.vue";

//import Test from "./History/Test.vue";


export default {
  components: {
    appPlayers: Players,
    // appCharacters: Characters,
    //appStatistcs: Statistics,
    appTimetables: Timetables,
    appHistories: Histories,
  },
  methods: {
    changeSelectedComp: function() {
      this.$store.state.selectedComp = "appTeamInfo";
    }
  }
};
</script>

The problem is that the checkbox value players.Scholarship is not passed properly in PlayerTabs.vue. What did I do wrong here?




Aucun commentaire:

Enregistrer un commentaire