How to change specific element in v-for css style?

Question

Vue.js

There is a list of articles with the possibility of commenting. By default, the comment input field for each article is hidden . It should open at the push of a button.
If you add a property the FooterForMessageClosed (true/false) property to check if the input field is open and change it when the button is clicked (v-if="FooterForMessageClosed"), then the input field is opened for all articles.

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

I came up with the idea to create an openInputForMessage(article_id) method and pass the id of this article to it. And then I don't know how to proceed
openInputForMessage(article_id) { }
An example of the vue component structure:

<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

Make an isFormCommentOpen field for each article, and simply pass the article object to the method on click, change this property to this object in the method. You can also check
v-if="a.isFormCommentOpen"