Для реализации вложенных комментариев во Vue можно использовать рекурсивные компоненты.
Пример структуры компонентов для отображения корневых и дочерних комментариев:
```html
<template>
<div class="comment">
<div class="content">{{ comment.text }}</div>
<button @click="toggleReplies">
{{ showReplies ? 'Hide Replies' : 'Show Replies' }}
</button>
<div v-if="showReplies" class="replies">
<comment v-for="reply in comment.replies" :key="reply.id" :comment="reply" />
</div>
</div>
</template>
<script>
export default {
props: ['comment'],
data() {
return {
showReplies: false
}
},
methods: {
toggleReplies() {
this.showReplies = !this.showReplies;
}
}
}
</script>
```
В этом примере компонент comment рекурсивно вызывает сам себя для отображения дочерних комментариев. При клике на кнопку "Show Replies" дочерние комментарии отображаются или скрываются.
Чтобы улучшить добавление новых комментариев к уже существующим, можно добавить функционал для отправки новых комментариев на сервер и обновления списка комментариев, чтобы новые комментарии автоматически появлялись в списке. Это можно сделать с помощью библиотеки axios для выполнения HTTP-запросов.
Пример отправки нового комментария на сервер:
```javascript
import axios from 'axios';
// Допустим, у вас есть метод для отправки нового комментария
addComment(newComment) {
axios.post('/api/comments', newComment)
.then(response => {
// После успешной отправки нового комментария обновляем список комментариев
this.comments = response.data.comments;
})
.catch(error => {
console.error(error);
});
}
```
Таким образом, при отправке нового комментария на сервер и получении обновленного списка комментариев, новые комментарии будут автоматически добавляться к уже существующим.