未使用Vue显示的表的td中的Div

Question

我有一个表，最后一列是一个div，其中有三个选项（查看，编辑和删除）。该子菜单始终处于隐藏状态，但是当我单击表的最后一列的选项按钮时，用于控制显示内容的数组将更新为true（应该显示），但是页。

这是我的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，则会显示出来，但是当我尝试通过clickign更改此设置时，什么也没有发生。

我有一个表，最后一列是一个div，其中有三个选项（查看，编辑和删除）。该子菜单始终处于隐藏状态，但是当我单击选项按钮时，即我的最后一列...

Answer 1

这是reactivity caveat，所以您应该这样做：