Как изменить определенному элементу в v-for стиль css?

Question

[Евгений Хрипунов]

Имеется список статей с возможностью комментирования. По умолчанию поле ввода комментария для каждой статьи скрыто. Должно открываться по нажатию кнопки.
Если добавить свойство FooterForMessageClosed (true/false) для проверки открыто ли поле ввода и изменять его при нажатии на кнопку (v-if="FooterForMessageClosed"), то поле ввода открывается у всех статей.

data() {
    return {
        FooterForMessageClosed: true,
        inputTextMessage: "",
    }
},

Пришла идея создать метод openInputForMessage(article_id) и передавать в него id данной статьи. А дальше как действовать не знаю =/
openInputForMessage(article_id) { }
Пример структуры vue компонента:

<div class="article" v-for="a in data.result" :key="a.id">
        ...

  <div class="footer_article">
    <button class="btn btn-main" @click="openInputForMessage(a.id)">
        Оставить сообщение
    </button>
    <div v-if="!FooterForMessageClosed" class="footer_article_message">
        <input id="chat-input-2" type="text" class="form-control" v-model="inputTextMessage"
               @keyup.enter="sendMessageToArticle(a.author.id, a.id)"
               placeholder="Введите сообщение">
        <label for="chat-input-2" class="sr-only">Введите сообщение</label>
    </div>
  </div> 
</div>

Answer 1

[Владимир Проскурин]

Сделайте для каждой статьи поле isFormCommentOpen, и просто в метод передавайте по клику объект статьи, в методе этому объекту меняйте это свойство. А также сможете сделать проверку
v-if="a.isFormCommentOpen"

Comments

[Евгений Хрипунов]

Спасибо