The method in Vue runs twice on click

The method in Vue runs twice on click

메서드 세트가 두 번 실행되는 이유는 무엇입니까?별을 클릭하면 콘솔을 볼 수 있습니다.삭제하면@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'
    });

The code is based on older version from someone, here it also doubles https://codepen.io/sktwentysix/pen/oZwXjN

움직이면@click="set(rating)"로.<input/>대신<label/>한 번 실행됩니다.

@click.stop="clickfunction($event)"

This will stop next calls and will call function only once.

이것은 기본 브라우저 동작입니다.를 클릭합니다.<label>두 번의 클릭이 트리거되며, 한 번은<label>을 위한 것<input>.

이를 회피하는 방법은 다음과 같이 추가하는 것입니다.@click.prevent고객님께<label>태그를 붙입니다.

저 같은 경우에는prevent@click 및 @click을 사용하여 거품을 방지합니다.

@click.prevent="action"
@submit.prevent="action"

프로그램에 영향을 주지 않으면 다음 위치에서 이벤트를 변경합니다.click로.mouseup.

@mouseup="set(rating)"

I think you should use new version of vue. https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js You are using really old 0.12.16 and your problem seems like a bug of this old version. You can set this in settings / JavaScript.

ReferenceURL : https://stackoverflow.com/questions/45481532/the-method-in-vue-runs-twice-on-click