Javascript Vue中的方法在单击时运行两次

为什么方法集运行两次？单击星号时可以看到控制台。 如果我删除

@click=“set（rating）”

什么都不会发生，就像在别处再次调用一样

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>

---

该代码基于某个人的旧版本，如果您将

@click=“set（rating）”

移动到

而不是

，它将运行一次。

我认为您应该使用vue的新版本。 您使用的是非常旧的0.12.16，您的问题似乎是这个旧版本的bug。

---

您可以在settings/JavaScript中进行设置。

在我的例子中，我使用了

prevent

进行@click和@submit以避免冒泡

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

---

这将停止下一次调用，并且只调用函数一次。

这是默认的浏览器行为。单击

将触发两次单击，一次用于

，另一次用于

---

避免这种情况的方法是将

@click.provent

添加到

标记中。

如果它不影响您的程序，请将事件从

click

更改为

mouseup

@mouseup="set(rating)"

---

OP描述的行为也发生在Vue的现代（2.*）版本中。是的，在2.5.16上也经历了类似的情况。在我的例子中，我将boostrap Vue升级到2.11.0。我不知道我解决了什么问题……这个问题更有用。因为有时在某些组件上进行

@单击

时，无法将

@单击

移动到内部元素。

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

@mouseup="set(rating)"