Why does the script not work on the first click?

Question

JavaScript

I hang an event on an element:

<div class="item-card__header" @click="showDocuments($event)">

I create a method in methods:

showDocuments: function (event) {
      if(event.currentTarget.nextElementSibling.style.display == 'none') {
        event.currentTarget.nextElementSibling.style.display = 'block';
      } else {
        event.currentTarget.nextElementSibling.style.display = 'none';
      }
    },

On the first click, an event fires (checked console.log() ), but the event doesn't fire.
On the second click, the element appears. What's wrong ?

Answer 1

This is the wrong approach. Make the showDocs property, which will be responsible for the visibility of the element, and add v-show="showDocs". The click handling will look like this: @click="showDocs = !showDocs".
Well, why your code does not work as it should - it's because the default value style.displayis not none at all, but an empty string (most likely - you hide the element through css, right?).
UPD. Taken from the comments:

This will not work, because I display the elements in the v-for loop.

It will turn out. Set each of the iterated objects to a separate property responsible for its visibility, something like this . Or make a component to display a separate element, which will contain a property that controls visibility.