vue.js toggle class on radio button click

Question

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>

Vishanth · Accepted Answer · 2019-05-03 05:35:51Z

1

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>

answered May 3, 2019 at 5:35

Vishanth

1,3703 gold badges14 silver badges26 bronze badges

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

Comments

Postlagerkarte · Accepted Answer · 2017-11-06 22:00:47Z

0

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.

answered Nov 6, 2017 at 22:00

Postlagerkarte

7,1775 gold badges39 silver badges54 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 02:16:39Z

0

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/

edited Jul 15, 2022 at 2:16

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 6, 2017 at 17:37

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

2 Comments

AdRock Over a year ago

Is it possible to set a default class on the i?

yuriy636 Over a year ago

@AdRock sure, just change lcb in data to the desired class, e.g lcb: 'fa-check',.

Collectives™ on Stack Overflow

vue.js toggle class on radio button click

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related