Как повесить директиву в рендер функции?

Question

[jeruthadam]

Чето я вообще ничего найти не могу.

render: function (createElement) {
    return createElement(
      'div',
      [...Array(this.layers).keys()].map(i => {
        return this.$slots.default
      })
    )
  },

Как на каждый элемент массива v-for (слоты) повесить директиву?

Answer 1

[0xD34F]

Чето я вообще ничего найти не могу.

Плохо искали. Нужная информация есть прямо в разделе документации, посвящённом render-функции.

Comments

[jeruthadam]

Повесить надо на слот или его содержание, а не на враппер div

[0xD34F]

jeruthadam, и что? Так сложно прицепить объект данных к vnode слота?

[jeruthadam]

0xD34F, а vnode не рендерится

[0xD34F]

jeruthadam, чё?

Я так понимаю, этот вопрос является продолжением вашего предыдущего. Позаимствовал оттуда кусок кода, сделал вам примерчик. Ну и что тут не рендерится?

[jeruthadam]

0xD34F, да, я делал не так. Я пытался вешать ввторым аргументом в дата объекте, а при этом слот не рендерился, пришлось делать дополнительный враппер div и на него вешать директиву. Спасибо ваш вариант попробую, должно работать!

[jeruthadam]

0xD34F, вашим способом не рендерится img. Если он передается в слот, то src исчезает почему-то.э

[0xD34F]

jeruthadam, предлагаете мне догадаться, что там у вас за img? Нет, так не будет.

UPD. Ладно, будет. Ничего не пропало. Можете сравнить код, подумать, почему так.

[jeruthadam]

0xD34F, извините, вот - https://codepen.io/anon/pen/QomXJm
Просто если передать артинку в слот то не работает.

[0xD34F]

jeruthadam, предыдущий комментарий смотрите, дополнил его.

[jeruthadam]

0xD34F, спс, утащил решение. Хоть не без негатива - у меня как и в решении ниже директива моя работает только на последнем элементе массива :( Что может быть причиной? Ваша директива работает ок. Моя только на последнем.

[0xD34F]

jeruthadam, да откуда мне знать? Код вашей директивы я не видел. Если оформите пример в песочнице, могу взглянуть, подумать, что было не так.

[jeruthadam]

0xD34F, спасибо, вот набросал - https://codepen.io/anon/pen/WmzVoa

[0xD34F]

jeruthadam, это из-за какого-то косяка внутри vue (он уже исправлен, используйте версию посвежее). В хук inserted передавался один и тот же элемент.

[jeruthadam]

0xD34F, не совсем понял. В кодепене вот используется - https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/v...

Ее надо обновить?

[0xD34F]

jeruthadam, да.

[jeruthadam]

Точно работает! https://codepen.io/anon/pen/ywKmqB

СПАСИБО! В жизни бы не догадался сам.

Answer 2

[alex]

Comments

[jeruthadam]

У меня так директива работает только на последнем элементе в массиве слотов...

[alex]

jeruthadam, кидайте код директивы

[jeruthadam]

Alex, скинул в решение выше, там тоже работает только на последнем элементе - https://codepen.io/anon/pen/WmzVoa

[alex]

jeruthadam, а если так? return [...this.$slots.default]

[jeruthadam]

Alex, проблема решена, это был косяк Вью, исправленный в новой версии (интересно я на него нарвался, хаха) - https://codepen.io/anon/pen/ywKmqB

[alex]

jeruthadam, но в моем фиддле изначально была последняя версия)

[jeruthadam]

Alex, да, но я ваш код проверял у себя локально, а не в фиддле) У меня была старая)