The method in Vue runs twice on click

Question

Why does the method set runs twice? You can see the console when you click the star. If I remove @click="set(rating)" nothing happens so not like it is again called elsewhere.

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

Answer 1

If you move @click="set(rating)" to <input/> instead of <label/>, it will run once.

Answer 2

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

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

Answer 3

It is a default browser behavior. Clicking on the <label> will trigger 2 clicks, one for <label> and one for <input>.

Way to avoid that is to add @click.prevent to your <label> tag.