How to add/remove class to checkbox elements in vue.js?

Question

In my Vue.js component, I'd like to add a background color to any checkbox that is clicked:

<div class="langs-container">

    <div class="lang">
        <input type="checkbox"   value="English"   class="mycheckbox" v-model="languages">
        English
    </div>
    <div class="lang">
        <input type="checkbox"   value="French"   class="mycheckbox" v-model="languages">
        French
    </div>

</div>

So let's say we want to add green to each checkbox that is active (ticked) and remove it when unticked:

.green {
 background-color: green;
}

What's the idomatic way to achieve this?

Update: languages is an array, so I can not define English and French as false by default.

Please elaborate your answer, I saw that page but can not apply it to this particular case. — Babr
– Babr, Commented Sep 18, 2018 at 12:22

Bennett Dams · Accepted Answer · 2018-09-18 12:25:50Z

4

Give each checkbox a v-model which is used for class binding.

Distinguish the two checkboxes by using an object for the input as v-model:

<input v-model="languages.english"...>

Use class binding based on that:

<div class="lang" :class="{ 'green': languages.english }">

UPDATE:

As requested in the comments, here is a solution for languages as array (instead of object), which is not as "clean" anymore:

You need an additional method to return true or false based on the checked values.

new Vue({
  el: "#app",
  data() {
    return {
      languages: []
    }
  },
  methods: {
    isChecked(value) {
     return this.languages.includes(value)
    }
  }
})

.green {
 background-color: green;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div class="langs-container">

    <div class="lang" :class="{ 'green': isChecked('English') }">
      <input type="checkbox" value="English" class="mycheckbox" v-model="languages"> English
    </div>
    <div class="lang" :class="{ 'green': isChecked('French') }">
      <input type="checkbox" value="French" class="mycheckbox" v-model="languages"> French
    </div>

  </div>
</div>

edited Sep 18, 2018 at 12:25

answered Sep 18, 2018 at 12:06

Bennett Dams

7,1836 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Babr Over a year ago

Well, the issue is that in my case, languages is expected to be an array, not an object. So this solution is not applicable, at least in present shape.

Bennett Dams Over a year ago

@Babr Updated my answer.

Collectives™ on Stack Overflow

How to add/remove class to checkbox elements in vue.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related