javascript - 布菲- 行悬停更改类

Question

我已经用动态数据填充了一个 b 表。
在第一列中，我想显示一个图标，但是当用户将鼠标悬停在特定行上时，应该会出现一个按钮。

我目前的想法是有一个@mouseenter 事件，我将当前悬停的行存储在一个变量中。我还为行的元素分配了动态类，这些类检查当前变量是否适用于它们自己的数据。

我有两个担忧：速度和两行可能具有相同数据的选项。但是，不幸的是，我的实现不起作用。另外，我不知道为什么，但不知何故，现在图标被隐藏并显示按钮，尽管就我而言，它应该是相反的。不过，让我展示一下我得到了什么。

    <template>
      <b-table :data="data" @mouseenter="rowHover">
        <b-table-column v-slot="props">
          <div
            class="div-icon"
            :class="this.hoveredRow == props.row ? 'isnt' : 'is-hidden'"
          ></div>
          <div
            class="div-action"
            :class="this.hoveredRow == props.row ? 'is-hidden' : 'isnt'"
          >
            <b-dropdown aria-role="list">
              <button slot="trigger" />
              <b-dropdown-item aria-role="listitem"> Menu Item </b-dropdown-item>
            </b-dropdown>
          </div>
        </b-table-column>
    
        <b-table-column v-slot="props">
          {{ props.row.original_title }}
        </b-table-column>
      </b-table>
    </template>
    
    <script>
    export default {
      data() {
        return {
          data: [],
          hoveredRow: null,
        };
      },
      methods: {
        rowHover(data, row) {
          this.hoveredRow = data;
        },
      }, [...]

如果有人想要交互式外观，我还在这里设置了一个代码框。

有没有更好的方法可以做到这一点？如果没有，有人可以告诉我我做错了什么吗？提前致谢！

标签： javascriptvue.jsbuefy