There are three tabs: Basic
, History
and Timetable
on my sharepoint webpage. (See image). I've got a class PlayerTabs.vue
in which those tabs were created and infos from other classes imported:
<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>
</vue-tabs>
</div>
</template>
<script>
import * as $ from "jquery";
import Players from "./PlayerBasicInfo/Players.vue";
import Histories from "./History/Histories.vue";
import Timetables from "./Timetable/Timetables.vue";
export default {
components: {
appPlayers: Players,
appTimetables: Timetables,
appHistories: Histories,
},
methods: {
changeSelectedComp: function() {
this.$store.state.selectedComp = "appTeamInfo";
}
}
};
</script>
<style>
.content_3f74e132 {
padding: 0px;
}
</style>
I want to open a new tab Scholarship Player
whenever the checkbox right next to the text is checked.
The checkbox is defined in my Players.vue
class which contains the following codepart:
<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="this.players.Scholarship"> </div>
</div>
The data is saved in a playersData
method:
playersData: function(data) {
this.players = [];
var $this = this;
for (var i = 0; i < data.length; i++) {
var Birthday = this.getJSONDateAsString(data[i].Birthday, "dd.MM.yyyy");
$this.players.push({
ID: data[i].ID,
PlayerID: data[i].NameId,
Name: data[i].Name,
IDinformation: data[i].IDinformation,
Nationality: data[i].Nationality,
Birthday: Birthday,
Scholarship: data[i].Scholarship
// other stuff
});
}
I'm pretty new to Vue.js
which is why I don't know how/where exactly I have to write the "if else" part. How do I get a new tab to open up if the checkbox next to Scholarship
is checked? I read about conditional rendering in Vue, f.ex. the v-if
directives, such as <h1 v-if="awesome">Vue is awesome!</h1>
, but I don't know how to apply the same analogy to tabs.
Aucun commentaire:
Enregistrer un commentaire