Vueのメソッドがクリック時に2回実行される

Question

メソッドセットが2回実行されるのはなぜですか？星をクリックすると、コンソールが表示されます。 @click="set(rating)"を削除しても何も起こりません。他の場所で再び呼び出されるようなことはありません。

http://jsfiddle.net/q22tqoLu/

HTML

<div id="star-app" v-cloak> 
      <star-rating value="0"></star-rating> 
     </div> 

     <template id="template-star-rating"> 
      <div class="star-rating"> 
       <label 
       class="star-rating__star" 
       v-for="rating in ratings" 
       :class="{'is-selected': ((value >= rating) && value != null), 'is-disabled': disabled}" 
       @mouseover="star_over(rating)" 
       @mouseout="star_out" 
       @click="set(rating)"> 
       <input 
       class="star-rating star-rating__checkbox" 
       type="radio" 
       :name="name" 
       :disabled="disabled" 
       :id="id" 
       :required="required" 
       v-model="value"> 
       ★ 
      </label> 
     </div> 
    </template> 

JS

'use strict'; 

    Vue.component('star-rating', { 
     template: '#template-star-rating', 
     data: function data() { 
      return { 
       value: null, 
       temp_value: null, 
       ratings: [1, 2, 3, 4, 5] 
      }; 
     }, 
     props: { 
      'name': String, 
      'value': null, 
      'id': String, 
      'disabled': Boolean, 
      'required': Boolean 
     }, 
     methods: { 
      star_over: function star_over(index) { 
       if (this.disabled) { 
        return; 
       } 

       this.temp_value = this.value; 
       this.value = index; 
      }, 
      star_out: function star_out() { 
       if (this.disabled) { 
        return; 
       } 

       this.value = this.temp_value; 
      }, 
      set: function set(value) { 
       if (this.disabled) { 
        return; 
       } 

      // This runs twice 
      console.log(value); 

       this.temp_value = value; 
       this.value = value; 
      } 
     } 
    }); 

    new Vue({ 
     el: '#star-app' 
    }); 

コードは誰かからの古いバージョンに基づいており、ここではそれはまた、https://codepen.io/sktwentysix/pen/oZwXjN

を倍増

Answer 1

<label/>の代わりに@click="set(rating)"を<input/>に移動すると、1回実行されます。

Answer 2

私はvueの新しいバージョンを使うべきだと思います。 https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js あなたは本当に古い0.12.16を使用しています。あなたの問題はこの古いバージョンのバグのようです。 設定/ JavaScriptでこれを設定できます。