我正在尝试完成以下任务:我父母中有一个复选框 组件(Players.vue)。
如果选中此复选框,则应在子组件(PlayerTabs.vue)中执行某些操作(应创建另一个选项卡)
这是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"> {{ players.Scholarship }}
<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>
这里是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,
appTimetables: Timetables,
appHistories: Histories,
},
methods: {
changeSelectedComp: function() {
this.$store.state.selectedComp = "appTeamInfo";
}
}
};
</script>
问题在于,在PlayerTabs.vue中未正确传递复选框值players.Scholarship
。我在这里做错了什么?