Vue中的方法在點擊時運行兩次

爲什麼該方法集運行兩次？單擊星標時可以看到控制檯。如果我刪除@click="set(rating)"什麼都不會發生，所以不會再像其他地方再次調用它。Vue中的方法在點擊時運行兩次

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>

'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

來源

2017-08-03 Ivan Topić