Why does @click fire once?

Question

JavaScript

in the component's template the following code:

<td :style="{background: colorCell[k]}" :class="getClass(k)" v-for="(typeFlat,k) in build" :key="k" @contextmenu.prevent="addString($event, building[j].id, k)" @click="changeCell(build[k], k, build.id)">
                    <span v-if="isLink(typeFlat)">
                        <a  href="javascript:void(0)">
                            {{ typeFlat.substr(0, lengthString) }}
                        </a>
                    </span>
                    <span v-else>
                        {{ typeof typeFlat === 'string' ? typeFlat.substr(0, lengthString) : typeFlat}}
                    </span>
                <div style="display: none" :ref="build.id+k">
                    <textarea :value="message" @change="message = $event.target.value" @blur="finishСhange(j)"/>
                    <select @blur="finishСhange()" @click="setMessage($event)" v-model="message">
                    </select>
                </div>
            </td>

the @click event fires a method that changes the this.eventFlag flag:

changeCell(val, title, id){
console.log(this.eventFlag)
if (this.eventFlag){
                this.eventFlag = false
            } else {
                this.eventFlag = true
            }
}

When a cell is clicked, the eventFlag should toggle, but it either fires or doesn't fire. Patterns of "non-operation" could not be identified"

Answer 1

Go from the opposite, remove all unnecessary, all attributes, menus, etc., and check. Might be in conflict with something.

Answer 2

The changeCell method made the div with ref=build.id+k visible, and the element nested in it in focus, by clicking on another td, the focus disappeared and made the div with ref=build.id+k - disaplay: none, after that the @ event click on cells didn't work. When I moved the hide div from ref=build.id+k to the changeCell method, everything worked.