单击 Vue.js 组件后星星淡出

Question

我想在Vue.js中制作一个星级组件，现在的问题是我点击星星后，它会淡出，然后才能显示最终结果。下面是 JSFiddle link:

这与我大部分复制代码的效果不同：

我想这与rating 属性有关。

现在我已经绑定 class 内联 :class="{selected: ((value >= rating && value != null))}。

但我想将它与 :class="selected: someFunction(rating)" 这样的对象绑定然后将 someFunction(rating) 写入计算的属性或其他不在 html 中的地方。有办法做到吗？

Answer 1

而不是

@click="setRate(rating)"

像这样定义您的点击事件：

@click.prevent="setRate(rating)"

这将从问题的原因中停止点击事件，即它触发两次，一次针对标签，一次针对输入。

关于你的第二个问题，你可以像这样在组件的 methods 对象中添加你的 someFunction()：

methods: {
    someFunction: function (value, rating) {
        return value >= rating && value != null;
    }
}

然后您可以在您的标记中调用它，如下所示：

<label :class="{selected: someFunction(value, rating)}">

Stars fade out after click in Vue.js component