[Vuejs]-Vue do not save clicked element style

by

0👍

✅

This is possible of course with buttons, but why don’t you use a radio input instead? Having only one item selected, that’s what they are done for.

new Vue({
  el: '#app',
  data() {
    return {
      languages: [{
          lang: 'D'
        },
        {
          lang: 'C#'
        },
        {
          lang: 'Python'
        }
      ],
      selectedLanguage: ''
    };
  },
  computed: {
    isLangSelected() {
      return this.selectedLanguage !== '';
    }
  }
});
input[type=radio] {
  visibility: hidden;
  width: 0;
}

input[type=radio]:checked + span {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app">
  <label v-for="lang in languages">
    <input type="radio" name="languages"
      v-model="selectedLanguage" :value="lang.lang">
    <span>{{lang.lang}}</span>
  </label>
  <div v-if="isLangSelected">
    Selected language is: {{ selectedLanguage }}
  </div>
</div>

Leave a comment