Звезды исчезают после щелчка в компоненте Vue.js

Я хочу создать компонент звездного рейтинга в 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. Есть ли способ сделать это?


javascript vue.js vue-component
person Community    schedule 25.12.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вместо

@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)}">
person Rommel Santor    schedule 25.12.2016
comment
Но почему двойная стрельба заставит его исчезнуть? Кажется, дважды будет тот же результат, что и один раз. - person PanJunjie潘俊杰; 25.12.2016
comment
Основная проблема заключается в конфликте со свойством value, поскольку оно изменяется вручную в setRate(), но при нажатии на <label> выбор радио <input> приводит к изменению свойства value. - person Rommel Santor; 25.12.2016
comment
Я думал, что радиоприемники имеют значения 1,2,3,4,5, и не проверял это (поэтому я думал, что их срабатывание установит свойство value на правильное значение 1,2,3,4,5). ). Оказывается, их значения не установлены, а значение по умолчанию — "on", которое равно NaN при преобразовании в число, таким образом, (value >= rating && value != null) всегда ложно, поэтому звезды исчезли... - person PanJunjie潘俊杰; 26.12.2016