JSFiddle - React, Tailwind, and code Playground

by Compay

HTML

<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
  <template>
    <div class="main">
      <div id="data">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <b-card no-body>
                <b-tabs pills card vertical>
                  <div v-for="departmentData in departments" :key="departmentData.id" class="department-data">
                  <b-tab :title="departmentData.name">
                    <b-card-text>
                      <div class="deptBadge">
                         <b-badge variant="dark">{{departmentData.name}}</b-badge>
                      </div>
                      <div v-for="(questionData, idx) in questions" :key="questionData.id" class="question-data">
                        <div class="questions">
                          <div>
                            <h6>{{questionData.title}}</h6>
                          </div>
                        </div>
                        <div class="answers">   
                          <div v-for="answer in questionData.answers" :key="answer.id">
                              <div>
                                <span>{{answer.id}} - {{answer.text}}</span>
                                  <p>
                                    {{departmentData.responses[idx][answer.id]}}
                                  </p>
                              </div>
                          </div>
                        </div>   
                      </div>
                    </b-card-text>  
                  </b-tab>
                  </div>
                </b-tabs>
              </b-card>
           ...

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    
    data() {
      return {
        questions: [
        {
        "title": "Question 1 blah blah blah",
        "answers": [
          {
            "id": "tv",
            "text": "TV"
          },
          {
            "id": "radio",
            "text": "Radio"
          },
          {
            "id": "none",
            "text": "None"
          }
        ]
      },
      {
        "title": "Question 2 blah blah blah",
        "answers": [
          {
            "id": "music",
            "text": "music 🍵"
          },
          {
            "id": "art",
            "text": "Art ☕"
          },
          {
            "id": "film",
            "text": "Film"
          }
        ]
      },
      {
        "title": "Question 3 blah blah blah?",
        "answers": [
          {
            "id": "book",
            "text": "Book"
          },
          {
            "id": "ebook",
            "text": "eBook"
          }
        ]
      }],
	      departments: {
      		group1: {
		        name: "Group 1",
    		    responses: [{
	            tv: 50,
            	radio: 37.5,
            	none: 12.5
          	}, {
            	music: 25,
            	art: 62.5,
            	film: 12.5
          	}, {
            	book: 87.5,
            	ebook: 12.5
          	}]
      		},
		      group2: {
		        name: "Group 2",
        		responses: [{
	            tv: 66.7,
            	radio: 33.3,
            	none: 0
          	}, {
            	music: 33.3,
            	art: 66.7,
            	film: 0
          	}, {
            	book: 66.7,
            	ebook: 33.3
          	}]
      		},
      	}
      }
    },
    
    computed: {
      answerResults(questionId) {
        /* departmentData.responses[questionId] */
      }
    }
  })
}