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

时间:2016-12-25 01:30:11

标签: javascript vue.js vue-component

我想在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中的其他位置。有没有办法成功呢?

1 个答案:

答案 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)}">