Handle click in VueJS and jQuery

Question

I'm new in Vue, and I'm really in doubt about something. Well, I'm in doubt about the way we handle click event in Vue and jQuery. For me, at this moment, jQuery seems to be more simple to achieve.

in jQuery we just do that:

HTML:

<div class="jquery-radio">
Radio 1 <input type="radio" name="radio" class="choose-radio" value="Radio1" checked>
<br>
Radio 2 <input type="radio" name="radio" class="choose-radio" value="Radio2">

jQuery

$('.choose-radio').click(function() {
    $('.choose-radio:checked').val() == 'Radio1' ? alert('Radio 1') :
    $('.choose-radio:checked').val() == 'Radio2' && alert('Radio 2 ');
});

So, my doubt is. How to achieve this, using Vue? I tried to do this, but as I said, jQuery seems to be more simple, because instead of add @click="myMethod()" i just do what I want, selecting the element (class) $('.choose-radio);

HTML:

<div class="jquery-radio">
Radio 1 <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio1" checked @click="showRadio1()">
<br>
Radio 2 <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio2" @click="showRadio2()">

Vue

var app = new Vue ({
    el: ".jquery-radio",
    methods: {
        showRadio1: function() {
            alert("Show 1");
        },
        showRadio2: function() {
            alert("Show 2");
        }
    }
   });

Check Fiddle

These examples above, is basic. In my project, I'll show different sections based on the value previously chosen in radio. I'm realy confused in Vue.

Hope you guys can clarify this information for me!

Answer 1

You can add the same handler and pass in the event object, which you can later use to retrieve the current element. Here's an working example:

var app = new Vue ({
    el: ".jquery-radio",
    methods: {
        show: function(event) {
          var value = event.target.value
          
          console.log(value)
        }
    }
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

<div class="jquery-radio">
   Radio 1 
   <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio1" checked @click="show($event)">
<br>
   Radio 2 
   <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio2" @click="show($event)">
</div>

PS: also, your jQuery approach is far from optimal, as it may yield errors if there are more elements that have the .choose-radio class. What you need is something like:

$('.choose-radio').click(function() {
    var value = $(this).val() // value of the selected object
});

Answer 2

It's a pretty different way of thinking. With Vue you want to change data and let Vue handle the DOM manipulation for you. I'd use v-model and toggle the visibility of sections based on that.

new Vue({
  data: {
    section: 'Radio 1'
  }
}).$mount('#app')

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <label><input name="section" type="radio" v-model="section" value="Radio 1"> One</label>
  <div v-if="section === 'Radio 1'">
    Radio One Is Selected!
  </div>

  <label><input name="section" type="radio" v-model="section" value="Radio 2"> Two</label>
  <div v-if="section === 'Radio 2'">
    Radio Two Is Selected!
  </div>

  <label><input name="section" type="radio" v-model="section" value="Radio 3"> Three</label>
  <div v-if="section === 'Radio 3'">
    Radio Three Is Selected!
  </div>
</div>