VueJs Checked Radio Button group

Question

I am using vueJs and have a radio button group. When the radio is checked how can I bind a css border attribute to a class :class="selected"?

The :checked attribute does not work as I have bound it to the v-model.

So if the radio is checked bind a class (selected) to the div.

<div class="sau-select lg center" :class="selected">
   <label for="windows">
      <input type="radio" id="windows" value="windows" v-model="selectedOs" :checked="checked">
      <span></span>
      <img src="/img/windows.gif" alt="Windows">Windows
   </label>
</div>

Answer 1

The :class="selected" you use hasn't much effect.

To conditionally apply a class to the div, you will have to use as :class condition if the selectedOs equals the value attribute of each <input>, such as :class="{redborder: selectedOs === 'windows'}". More details in the demo below:

new Vue({
  el: '#app',
  data: {
    selectedOs: 'windows'
  }
})

.redborder { border: 1px solid red; }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <label :class="{redborder: selectedOs === 'windows'}">
    <input type="radio" value="windows" v-model="selectedOs"> Windows
  </label>

  <label :class="{redborder: selectedOs === 'linux'}">
    <input type="radio" value="linux" v-model="selectedOs"> Linux
  </label>
</div>

Notice that value="linux" means that that radio box will assign the string "linux" to the v-model variable (in this case selectedOs). value="linux" is equivalent to :value="'linux'", for instance.