mardi 24 septembre 2019

How can I open a new tab automatically if a checkbox is checked in Vue.js?

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.

Tabs

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