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