Создание области без определения компонента

Question

У меня есть <table> с кучей <tr> с и <td> с внутри. При наведении курсора на ячейку таблицы, я хочу, чтобы внутри этой ячейки появилась кнопка.

Я создал поле data с именем hovered и добавил @mouseenter="hovered = 1" / @mouseleave="hovered = 0" на каждый <td>. Кнопки также получили v-show="hovered".

Как вы можете догадаться, всякий раз, когда я наводю курсор мыши на ячейку, появляются все кнопки, поскольку все они зависят от одного и того же значения hovered.

Интересно, действительно ли я должен создать свой собственный компонент MyTr, чтобы обойти это. Есть ли способ создать какую-то область видимости прямо в HTML и даже не беспокоиться об объявлении поля data?

ОБНОВЛЕНИЕ

Я попытался создать компонент и столкнулсядругая проблема (кроме ошибки рендеринга из-за отсутствия is , объясненной здесь ). Это мой компонент:

Vue.component('td-hoverable', {
  data: function () { return {
      hovered: false
    }
  },
  template: '<td v-on:mouseenter="hovered = 1" v-on:mouseleave="hovered = 0"> <slot></slot> </td>'
});

И вот как я его использую:

<table>
<tr>
<td is="td-hoverable" v-for="..." v-bind:key="di">
   <button v-show="hovered"> x </button>
</td>
</tr>
</table>

Однако, когда я запускаю приложение, я получаю

[Vue warn]: свойство или метод "hovered" не определены в экземпляре, но на него ссылаются во время рендеринга.

Я пытался добавить v-bind:hovered="hovered" к <slot>, но это не помогло. Что я делаю не так?

Answer 1

В общем, это тот тип сложности, который требует компонента, но из-за вашей проблемы с <slot> Я вижу, что ваш вариант использования должен быть несколько сложным, и могут быть причины, по которым вы хотите избежать созданиякомпонент для этого.

К исходному вопросу, если у вас уже есть поле id для индексации ячеек таблицы, вы можете сделать hovered словарем и проиндексировать его с тем же полем. Обратите внимание, что из-за vue ограничений реактивности javascript вы не можете использовать hovered[item.id] = 1, потому что он не будет реагировать, поэтому вы должны использовать $set(hovered, item.id, 1):

data: function () { return {
  hovered: {}
}

<td @mouseenter="$set(hovered, item.id, 1)"
    @mouseleave="$set(hovered, item.id, 0)">
  <button v-show="hovered[item.id]">

Answer 2

Должно быть выполнимо с использованием директив:

https://vuejs.org/v2/guide/custom-directive.html