在 Vue.js 组件中单击后星星会淡出答案

【问题标题】：Stars fade out after click in Vue.js component在 Vue.js 组件中单击后星星会淡出
【发布时间】：2016-12-25 01:30:10
【问题描述】：

我想在 Vue.js 中制作一个星级组件，现在的问题是，在我点击星星后，它会在显示最终结果之前淡出。以下是 JSFiddle 链接：

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

我猜这与rating 属性有关。

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

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

【问题讨论】：

【解决方案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)}">

【讨论】：

但是为什么射击两次会使它褪色呢？似乎两次的结果与一次相同。
根本问题是与value 属性的冲突，因为它是在setRate() 中手动修改的，但是在单击<label> 时，选择<input> 会导致value 属性也要改变。
我认为收音机的值是 1,2,3,4,5 并且没有验证（这就是为什么我认为触发它们会将 value 属性设置为正确的值1,2,3,4,5)。原来它们的值没有设置，默认值为"on"，转换为数字时为NaN，因此(value >= rating && value != null)始终为false，所以星星淡出...