如果选中了来自父组件的复选框,请在子组件中执行某些操作

时间:2019-09-29 11:15:01

标签: javascript vue.js checkbox sharepoint reference

我正在尝试完成以下任务:我父母中有一个复选框 组件(Players.vue)。

Checkbox

如果选中此复选框,则应在子组件(PlayerTabs.vue)中执行某些操作(应创建另一个选项卡)

Tab

这是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。我在这里做错了什么?

0 个答案:

没有答案