Vue

by vucko

HTML

<div id="app">
  <div class="genders">
    <div class="gender" v-for="(gender, index) in genders" :key="index + '-gender'">      
      <button type="button" @click="setLogic(genders, index)" :class="{ 'active': gender.selected }">
        {{ gender.label }}        
        {{ gender.selected }}        
      </button>
    </div>
    
    <hr>
    
    <div class="question" v-for="(question, index) in questions" :key="index + '-question'">      
      <button type="button" @click="setLogic(questions, index)" :class="{ 'active': question.selected }">
        {{ question.label }}        
        {{ question.selected }}        
      </button>
    </div>
  </div>
</div>

CSS

.active {
  color: red
}

Vue

new Vue({
  el: "#app",
  data: {
		genders: [
    	{ label: 'Male', selected: false },
    	{ label: 'Female', selected: false },
    	{ label: 'Others', selected: false }
    ],
		questions: [
    	{ label: 'prvo piganje', selected: false },
    	{ label: 'drug', selected: false },
    	{ label: 'ctea', selected: false },
    	{ label: 'fsa', selected: false },
    	{ label: 'ctasfea', selected: false },
    ],
  },
  methods: {
		setLogic(elementsArray, index) {     
      elementsArray.forEach(element => {
        element.selected = false
      })
      
      elementsArray[index].selected = true
    }
  }
})