показ Div внутри td таблицы не реагирует с использованием Vue

Question

У меня есть таблица, в которой последний столбец - это div, где у меня есть три варианта («Просмотр», «Редактировать» и «Удалить»).Это подменю всегда скрыто, но когда я нажимаю кнопку параметров, которая является последним столбцом моей таблицы, массив, который я использую для управления отображаемым объектом, обновляется до значения true (оно должно отображаться), но в моем случае ничего не происходитpage.

Вот мой HTML-код

<td class="kt-datatable__cell">
    <span style="overflow: visible; position: relative; width: 197px;">
        <center>
            <div class="dropdown">
                <a data-toggle="dropdown" class="btn btn-sm btn-clean btn-icon btn-icon-md" @click="toggleHover(index)"
                 v-bind:class="{'show': hover[index]}">
                    <i class="flaticon2-shield"></i>
                </a>
                <div v-bind:class="{'show': hover[index]}" class="dropdown-menu">

А вот мой метод, который я вызываю, используя @click

methods: {
    toggleHover(index) {
        this.hover[index] = !this.hover[index];
    }

Если я установил true для случайногоПоложение сразу после того, как я получаю данные с сервера, это показывает, но когда я пытаюсь изменить это нажатием, ничего не происходит.

Answer 1

Это reactivity caveat, поэтому вы должны сделать:

methods: {
    toggleHover(index) {
        this.$set(this.hover,index , !this.hover[index]);
    }