使用 Vue 在表的 td 内显示 Div 不是反应性的

Posted 2023-02-16

【中文标题】使用 Vue 在表的 td 内显示 Div 不是反应性的

【英文标题】：showing Div inside td of a table is not reactive using Vue

【发布时间】：2020-01-25 17:47:08

【问题描述】：

我有一个表，最后一列是一个 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，它会显示，但是当我尝试通过单击更改此设置时，没有任何反应。

【参考方案1】：

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

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