1

Есть список из ячеек, в них использую кастомную директиву, которая на ховер и keypress вызывает тултип, но иногда нужно обновлять данные, поэтому приходится использовать хук update у директивы, но когда делаю изменения в одной ячейке то update вызывается будто бы на всех ячейках, как сделать чтобы update выполнился только на той, которую изменил? Или возможные способы обойти это.

<div class="table">
    <div
            v-wfm-tooltip
            v-for="(item, index) in getShifts"
            @keypress="setShift($event, index)"
            class="table__cell"
            contenteditable="true">
      {{item.shift}}
    </div>
</div>

тут псевдо пример директивы

function tooltipDirective(store: any) {
   function addTooltip() {
      console.log('addTooltip')
   }
   function bind(el, binding, vNode) {
      el.addEventListener('mouseenter', addTooltip)
   }
   function update() {
      console.log('update') // при изменении одной ячейки, выводит лог 
                               столько раз, сколько ячеек
   }
   return {
      bind,
      update
   }
}
export default tooltipDirective;

Пример в sandbox

https://codesandbox.io/s/vue-template-qgbnf?fontsize=14

8
  • попробуйте добавить воспроизводимый код. Это бы очень помогло
    – Dmytro
    5 ноя 2019 в 17:27
  • 1
    добавил пример в песочнице
    – 4e4e4i
    5 ноя 2019 в 17:40
  • файл с кодом директивы пустой и весь код не работает
    – Dmytro
    5 ноя 2019 в 17:53
  • странно, попробовал снова пересохранить, сейчас работает?
    – 4e4e4i
    5 ноя 2019 в 17:55
  • теперь state пустой
    – Dmytro
    5 ноя 2019 в 18:00

1 ответ 1

1

Проблему с множественными update'ами удалось обойти, после того, как выделил блок, который отрисовывается циклом v-for, в отдельный компонент. Получилось как-то так:

<template>
  <div>
    <div
      v-wfm-tooltip="item"
      @keypress="setShift($event, index)"
      class="table__cell"
      contenteditable="true"
    >{{item.shift}}</div>
  </div>
</template>

<script>
export default {
  props: ["item", "index"],
  methods: {
    setShift(e, index) {
      console.log(index)
      this.$store.dispatch("setShift", { key: e.key, index });
    }
  }
};
</script>

https://codesandbox.io/s/vue-template-ovq8v

1
  • Это работает, но теперь придется постоянно создавать компоненты, чтобы навесить директиву, думаете это нормальный подход или прям костыль?
    – 4e4e4i
    6 ноя 2019 в 9:50

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.