CODEWITHSUNDEEP
laravel-5vuejs2toggle
AdRock
AdRock

Reputation: 3096

vue.js toggle class on radio button click

I have just started Vue.js and what should seen simple enough doesn't work.

I have 2 radio button and depending which one is clicked I want to change a font awesome icon. When I click on Yes i want to add the class fa-fa-check and when I click No, add class fa-fa-times

<div class="form-group">
    <div class="col-sm-1">
        <i class="fa fa-2x fa-check {{lcb}}"></i>
    </div>
    <label class="control-label col-sm-5">New Field</label>
    <div class="col-sm-3">
        <div class="radio"> 
            <label>
                <input type="radio" name="test" value="1" v-model="lcb" v-bind:value="check">
                <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                Yes
            </label>
        </div>
    </div>
    <div class="col-sm-2">
        <div class="radio"> 
            <label>
                <input type="radio" name="test" value="0" v-model="lcb" v-bind:value="times">
                <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                No
            </label>
        </div>
    </div>
</div>

This causes an error

Use of undefined constant lcb - assumed 'lcb'

I've also tried using v-if and v-else but that didn't work either

I don't know if this is the right way to do it

<script>
    var app = new Vue({
        el: '#app',
        data: {
            lsb: false,
            check: 'fa-check',
            times: 'fa-times'
        }
    });
</script>

Upvotes: 0

Views: 3554

Answers (3)

yuriy636
yuriy636

Reputation: 11661

There is a Vue specific syntax for conditional classes, like the array one: https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax

<i v-bind:class="['fa', 'fa-2x', lcb]"></i>

This way lcb will be replaced by the checked radio value, and the class will update accordingly.

JSFiddle: https://jsfiddle.net/yuriy636/1abceh49/

Upvotes: 0

Vishanth
Vishanth

Reputation: 1370

This one doesn't require any methods for the click event.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary" v-bind:class="{ active: (this.showcheck === 'value1') }">
    <input type="radio" name="radioset" id="option1" v-model="showcheck" value="value1"> Option One
  </label>
  <label class="btn btn-secondary" v-bind:class="{ active: (this.showcheck === 'value2') }">
    <input type="radio" name="radioset" id="option2" v-model="showcheck" value="value2"> Option Two
  </label>
</div>

Upvotes: 1

Postlagerkarte
Postlagerkarte

Reputation: 7117

Use a computed property:

var app = new Vue({
  el: '#app',
  data: {
    showcheck: true,
  },
computed: {
  classObject: function () {
    return {
      'fa-check': this.showcheck,
      'fa-times': !this.showcheck
    }
  }
}})

In your html use:

<i v-bind:class="classObject">msg</i>

and bind to checkboxes to the showcheck property:

<input type="radio" name="test"  :value="true" v-model="showcheck"/>

Here is a working fiddle.

Upvotes: 0

Related Questions