Почему при использовании директивы позже нельзя обновить текст в элементе?

Question

[danyadev]

У меня есть директива, с помощью которой можно сделать нормальное отображение emoji (из простого эмодзи делается img с картинкой этого эмодзи).
Вот сама директива:

Vue.directive('emoji', (el) => {
  el.innerHTML = emoji(el.innerHTML);
});

Вот часть template:

<div class="conversation_name" v-emoji>{{ chatName }}</div>

chatName - это computed свойство, которое время от времени изменяется, но с использованием директивы этого не происходит. Как сделать так чтобы все работало нормально?

Answer 1

[0xD34F]

Vue.directive('emoji', (el, binding) => el.innerHTML = emoji(binding.value));

<div class="conversation_name" v-emoji="chatName"></div>

Comments

[danyadev]

а нельзя решить сохранив {{ ... }}?

[0xD34F]

danyadev,

Vue.directive('emoji', (el, binding, vnode) => el.innerHTML = emoji(vnode.children[0].text));

Но как по мне, это как-то криво. Чем мотивирована необходимость использовать интерполяцию?

[danyadev]

0xD34F, на самом деле мне просто не хочется вместо интерполяции передавать в атрибут значение, ибо это очень много где будет использоваться

[0xD34F]

danyadev, и в чём тут недостаток передачи значения (и не в атрибут, а в директиву - ну что за безграмотность-то такая?)?

А код из предыдущего моего комментария вы наверное не увидели, да? Вам повторить?

Answer 2

[Станислав Лашманов]

Сделайте обычный компонент вместо директивы, он больше сюда подходит по своей сути.

export default {
  name: 'EmojiImage',
  props: {
    emoji: 'String'
  },
  computed: {
    image() {
      return ''; \\ Здесь сформируйте url картинки, это так же позволит использовать кэш, загружать их асинхронно
    }
  }

}

<template>
  <span class="emoji-image">
    <img :src="image" :alt="emoji" />
  </span>
</template>

<EmojiImage :emoji="emoji" />