CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Selaminko Elam
Selaminko Elam

Reputation: 193

perform action when vue js radio changes

according to which radio I want to do, the div will be opened and the other one will be closed. I couldn't figure it out. I'm new to vuejs and stackoverflow. Thanks in advance.

<div class="col-sm-3 d-flex border-light">
        <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange($event)" value="1" checked>
        <label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label>
    </div>
    <div class="col-sm-3 d-flex border-light">
        <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange($event)" value="2">
        <label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label>
    </div>


<div>YELLOW</div>
<div>BLUE</div>

export default {
    data() {
        return {
            show: true,
            
        }
    },
    methods: {
        onChange(event) {
            var data = event.target.value;

        }
    }

}

Upvotes: 3

Views: 3381

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

In template you call method with value @change="onChange(false)" You show divs if data show is true or false v-if="show" In method you set data show depending on radio button clicked this.show = color Something like following snippet:

new Vue({
  el: '#app',
    data() {
        return {
            show: true,
        }
    },
    methods: {
        onChange(color) {
            this.show = color
        }
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="col-sm-3 d-flex border-light">
        <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange(true)" value="1" checked>
        <label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label>
    </div>
    <div class="col-sm-3 d-flex border-light">
        <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange(false)" value="2">
        <label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label>
    </div>
  <div v-if="show">YELLOW</div>
  <div v-if="!show">BLUE</div>
</div>

Upvotes: 1

Related Questions