Выпадающее меню при клике на ячейку

Question

подскажите пожалуйста как при клике на любую ячейку рядом с ней вывести выпадающее меню sub-menu, изначально оно должно быть скрыто

<table>
    <tbody>
        <tr>
            <td v-for="n in 31"></i></td>
        </tr>
    </tbody>
</table>

<ul class="sub-menu">
    <li>
        <a href="javascript:void(0)"><i class="fe fe-check text-success"></i></a>
        <a href="javascript:void(0)"><i class="fe fe-x text-danger"></i></a>
        <a href="javascript:void(0)"><i class="fe fe-sun text-primary"></i></a>
        <a href="javascript:void(0)"><i class="fe fe-alert-circle text-warning"></i></a>
    </li>
</ul>

Answer 1

<table>
    <tbody>
        <tr>
            <td v-for="n, i in 31" :key="i" @click="selectItem(i)">
              <ul class="sub-menu" v-show="activeItem === i">
                <li>
                  <a href="javascript:void(0)"><i class="fe fe-check text-success"></i></a>
                  <a href="javascript:void(0)"><i class="fe fe-x text-danger"></i></a>
                  <a href="javascript:void(0)"><i class="fe fe-sun text-primary"></i></a>
                  <a href="javascript:void(0)"><i class="fe fe-alert-circle text-warning"></i </a>
                </li>
              </ul>
            </td>
        </tr>
    </tbody>
</table>

data() {
  rerurn {
    activeItem: null
  }
},
methods: {
  selectItem(i) {
    this.activeItem = i;
  }
}

БЛОГ НА HUSL

Выпадающее меню при клике на ячейку

Ответы (1 шт):