我想在Vue.js中制作一个星级评分组件,现在的问题是,在点击星星后,它会在显示最终结果之前消失。下面是JSFiddle链接:
https://jsfiddle.net/L6L34ybr/5/
这与我主要复制代码的效果不同:
http://codepen.io/nouveller/pen/qOxKBJ
我想这与rating
属性有关。
现在我已将该内联:class="{selected: ((value >= rating && value != null))}
绑定到该类。
但是我想用像:class="selected: someFunction(rating)"
这样的对象绑定它
然后将someFunction(rating)
写入计算属性或不在html中的其他位置。有没有办法成功呢?
答案 0 :(得分:3)
而不是
@click="setRate(rating)"
定义您的点击事件,如下所示:
@click.prevent="setRate(rating)"
这将停止问题原因的点击事件,即它会触发两次,一次用于标签,一次用于输入。
关于您的第二个问题,您可以在组件的someFunction()
对象中添加methods
,如下所示:
methods: {
someFunction: function (value, rating) {
return value >= rating && value != null;
}
}
然后你可以在你的标记中调用它,如下所示:
<label :class="{selected: someFunction(value, rating)}">