Показать / скрыть элемент в пределах одного элемента списка, не все из них - PullRequest
Новая
       10

Показать / скрыть элемент в пределах одного элемента списка, не все из них

0 голосов
/ 01 апреля 2019

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

Как я могу настроить таргетинг на каждый комментарий индивидуально с помощью функции показать / скрыть в Vue?

Я знаю, почему мое решение не работает, но я не знаю, с чего начать создание функции, нацеленной на конкретный комментарий, нажав на нее.

Шаблон (HTML) 

<ul>
    <li v-for="comment in comments" :key="comment.data.id">
        <div>User details</div>
        <div>Comment content</div>
        <div>
            <span>
                <a v-on:click="hideReply = !hideReply">Reply</a>
            </span>
        </div>

        <form v-if="hideReply">
            <textarea>Reply text box</textarea>
            <button>Reply button</button>
        </form>
    </li>
    <li>Another comment in the list...</li>
    <li>Another comment in the list...</li>
    ...
</ul>

Сценарий (JS) 

export default {
    name: 'Post',
    components: {},
    data () {
        return{
            hideReply: false,
            comment: undefined,
            comments: undefined
        }
    },
    async created () {
        // code to bring in my comments from server
    },
    methods: {
        betterShowHideFunction () {
            // where do i start
        }
    }
}

1 Ответ

0 голосов
/ 01 апреля 2019

Добавьте свойство show к каждому комментарию и используйте его для отображения / скрытия каждого отдельного комментария 

<form v-if="comment.show">

Измените переменную соответственно 

<a v-on:click="comment.show = !comment.show">Reply</a>
...