Для реализации сохранения рейтинга комментариев на фронтенде с использованием Vue.js вам понадобится несколько компонентов и методов.
1. Создайте компонент, представляющий отдельный комментарий. В этом компоненте вы можете отображать текст комментария, автора и рейтинг. Компонент также должен иметь кнопки для голосования вверх и вниз.
2. Внутри этого компонента создайте переменную rating, которая будет хранить текущий рейтинг комментария. По умолчанию, установите ее значение равным рейтингу комментария, который вы получите из API или другого источника данных.
3. Обработайте события нажатия на кнопки голосования вверх и вниз. Создайте методы upvote и downvote, которые будут изменять значение переменной rating в соответствии с действиями пользователя.
Пример кода для метода upvote:
methods: {
upvote() {
this.rating += 1; // увеличить значение рейтинга на 1
this.saveRating(); // сохранить рейтинг после голосования
},
},
Аналогично можно создать метод downvote для уменьшения значения рейтинга на 1.
4. Создайте метод saveRating, который будет отправлять новое значение рейтинга на сервер для сохранения. Вы можете использовать асинхронный запрос с использованием Axios или другой библиотеки для работы с HTTP.
Пример кода для метода saveRating:
methods: {
saveRating() {
axios.put(`/comments/${this.commentId}`, { rating: this.rating })
.then(response => {
console.log(`Рейтинг комментария ${this.commentId} сохранен`);
})
.catch(error => {
console.error(`Ошибка при сохранении рейтинга комментария ${this.commentId}`, error);
});
},
},
Помимо рейтинга, вы также можете передавать серверу другую информацию, связанную с комментарием, как, например, его идентификатор.
5. В главном компоненте вашего приложения, где отображаются все комментарии, вы можете использовать созданный компонент для каждого комментария и передавать ему соответствующий рейтинг.
Пример кода для главного компонента:
<template>
<div>
<comment v-for="comment in comments" :key="comment.id" :commentId="comment.id" :initialRating="comment.rating" />
</div>
</template>
В этом примере мы передаем идентификатор и начальным значением рейтинга для каждого комментария из массива comments.
Таким образом, вы создали компонент для отображения комментариев, реализовали кнопки голосования и обработчики событий для изменения рейтинга, а также метод для сохранения нового значения рейтинга на сервере.