Переключить форму во вложенном цикле v-for в VueJS

Question

У меня есть список вложенных комментариев. Под каждым комментарием я хотел бы добавить кнопку «Ответить», которая при нажатии отображает форму ответа.

На данный момент, каждый раз, когда я нажимаю кнопку «Ответить», отображается форма. Но дело в том, что я хотел бы показать только одну форму на всей странице. В общем, когда я нажимаю «ответить», он должен закрыть другую открытую форму и открыть новую под правильным комментарием.

Редактировать:

Так что я смог добиться небольшого прогресса. Теперь у меня есть только одна активная форма, открывающаяся на каждом уровне глубины во вложенном цикле. Очевидно, что сейчас я пытаюсь сделать только один. Что я сделал, так это испустил событие из дочернего компонента и обработал все в родительском компоненте. Дело в том, что это отлично работает в списке не вложенных комментариев, но не так много в моем случае ...

Вот новый код:

В parentComponent у меня есть метод handleSelected следующим образом:

handleSelected (id) {
  if(this.selectedItem === id)
    this.selectedItem = null;
  else
    this.selectedItem = id;
},

И мой ребенокКомпонент:

<template>
    <div v-if="comment">
        <div v-bind:style=" iAmSelected ? 'background: red;' : 'background: none;' ">
            <p>{{ comment.author.name }}<br />{{ comment.created_at }}</p>
            <p>{{ comment.content }}</p>
            <button class="button" @click="toggle(comment.id)">Répondre</button>
            <button class="button" @click="remove(comment.id)">Supprimer</button>

            <div v-show="iAmSelected">
                <form @submit.prevent="submit">
                    <div class="form-group">
                        <label for="comment">Votre réponse</label>
                        <textarea class="form-control" name="comment" id="comment" rows="5" v-model="fields.comment"></textarea>
                        <div v-if="errors && errors.comment" class="text-danger">{{ errors.comment[0] }}</div>
                    </div>

                    <button type="submit" class="btn btn-primary">Envoyer</button>

                    <div v-if="success" class="alert alert-success mt-3">
                        Votre réponse a bien été envoyée !
                    </div>
                </form>
            </div>
        </div>

        <div v-if="comment.hasReply">
            <div style="margin-left: 30px;">
                <comment v-for="comment in comments"
                    :key="comment.id"
                    :comment="comment" @remove-comment="remove"
                    :is-selected="selectedItem" @selected="handleSelected($event)">
                </comment>
            </div>
        </div>
    </div>
</template>
<script>
    import comment from './CommentItem'

    export default {
        name: 'comment',
        props: {
            isSelected: Number,
            comment: {
                required: true,
                type: Object,
            }
        },
        data () {
            return {
                comments: null,
                fields: {},
                errors: {},
                success: false,
                loaded: true,
                selectedItem: null,
            }
        },
        computed: {
            iAmSelected () {
                return this.isSelected === this.comment.id;
            }
        },
        methods: {
            remove(id) {
                this.$emit('remove-comment', id)
            },
            toggle(id) {
                this.$emit('selected', id);
            },
            handleSelected(id) {
              if(this.selectedItem === id)
                this.selectedItem = null;
              else
                this.selectedItem = id;
            },
        },
        mounted(){
            if (this.comment.hasReply) {
                axios.get('/comment/replies/' + this.comment.id)
                .then(response => {
                    this.comments = response.data
                })
            }
        }
    }
</script>

Заранее спасибо за помощь!