VueJSとjQueryのハンドルをクリック

Question

私はVueで新しく、私は何かについて疑問を持っています。さて、私たちがクリックイベントを処理する方法については、Vue and jQueryには疑問があります。私の場合、この時点で、jQueryはより簡単に実現できるように見えます。

私達はちょうどそれを行うjQueryので

：

は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 '); 
}); 

だから、私の疑問があります。 Vueを使ってこれを達成する方法は？私はこれを実行しようとしましたが、私が言ったように、jQueryのは、（クラス）の要素を選択するのではなく、私はちょうど私がやりたい@click="myMethod()"を追加しているため、よりシンプルであるように思わ$('.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

これらの例は基本的なものです。私のプロジェクトでは、ラジオで以前に選択した値に基づいて、さまざまなセクションを表示します。私はVueで本当に混乱しています。

あなたは私のためにこの情報を明確にすることができますように！

Answer 1

同じハンドラを追加してイベントオブジェクトを渡すことができます。このオブジェクトを後で使用して現在の要素を取得できます。ここでは作業例を示します。

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：.choose-radioクラスを持っているより多くの要素がある場合、それはエラーをもたらす可能性としても、あなたのjQueryのアプローチは、はるかに最適からです。あなたが必要とするものは次のようなものです：

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

Answer 2

これはかなり異なる考え方です。 Vueでは、データを変更してVueにDOM操作を処理させます。私はv-modelを使用し、それに基づいてセクションの表示を切り替えます。

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>