JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <div class="container">
  <p></p> 
  <div v-for="s in subjects">
      {{s}}
    </div>
    <div class="row">
      <div class="col-sm-4 border-right">
        <br>
        <div>
          <button v-for="(obj, key) in subjects"
             :key="key"
             @click.prevent="selSub(key)"
             :class="subClass(key)"
             class="btn btn-primary btn-xs but">
            {{key}}
          </button>
        </div>
      </div>
      <div class="col-sm-6">
        <div>
          <br>
          <button v-for="tag in subjects[selectedSubject]"
              key="tag"
              class="btn btn-xs but"
              :class="tagClass(tag)"
              @click.prevent="selTag(tag)">
            {{tag.display}}
          </button>
        </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div>
         <br>
         selectedSubject: {{selectedSubject}} <br>
         selectedTag: {{selectedTag}}
        </div>
      </div>
    </div>    
  </div>
</div>

CSS

.btn {
  margin-right: 10px;
  margin-bottom: 5px;
}

JavaScript

console.clear()

const subjects = {
  SubjectA: [ 
    {id: "1", display: "A1", value: 'A1v1'}, 
    {id: "2", display: "A2", value: 'A2v2'}, 
    {id: "3", display: "A3", value: 'A3v3'}, 
    {id: "4", display: "A4", value: 'A4v4'}, 
    {id: "5", display: "A5", value: 'A5v5'}, 
    {id: "6", display: "A6", value: 'A6v6'}, 
    {id: "7", display: "A7", value: 'A7v7'}, 
    {id: "8", display: "A8", value: 'A8v8'} 
  ],
  SubjectB:[
    {id: "1", display:"B1", value:"B1v1"},
    {id: "2", display:"B2", value:"B2v2"}
  ] 
}

new Vue({
  el:"#app",
  data:{
    selectedSubject: '',
    currentTag: '',
    selectedTag: '',
    subjects,
  },
  methods:{
    tagClass(tag){
      return {
        'btn-warning': this.selectedTag === tag,
        'btn-primary': !(this.selectedTag === tag)
      }
    },
    subClass(sub){
      return {
        'btn-warning': this.selectedSubject === sub,
        'btn-primary': !(this.selectedSubject === sub)
      }
    },
    selSub(key){
      this.selectedSubject = key
      this.selectedTag = ''
      const mySelectedTag = JSON.parse('{"display":"A1","value":"A1v1"}')
      this.selectedTag =  this.tags[this.selectedTag].find(t => t.value === mySelectedTag.value)
      "subClass(this.selectedTag)"
    },
    selTag(key){
      this.selectedTag = key
    } 
  },
  mounted(){
      this.selectedSubject= "SubjectA"
      const mySelectedTag = JSON.parse('{"display":"A1","value":"A1v1"}')
      this.selectedTag =  this.tags[this.selectedTag].find(t => t.value === mySelectedTag.value)
      "tagClass(this.selectedTag)"
      
  }
})