Как передать значение реквизита в функцию JS из компонента Vue

Question

У меня есть файл JS с функцией и компонентом, как показано ниже:

function emojify(name){
  var emj='';
  if (name!=''){
    emj= '<img src="/static/emojis/'+name+'.png" alt="img" > '
  }
  return emj
}


Vue.component("cmp2",{ props:["name"] , template: `<p>` + emojify("name") + `</p>`})

Я называю этот компонент из HTML, как показано ниже

<cmp2 name="ron" ></cmp2>

Изображение Рона не появляется. Но если я объявлю свой компонент, как показано ниже, он будет работать:

Vue.component("cmp2",{ template:'<p>' + emojify("ron") + '</p>'})

Так что образ Рон существует и работает нормально. Я просто не могу передать значение реквизита name функции emojify. Как это можно сделать?

Answer 1

Вы не можете сделать это, поскольку template вычисляется во время компиляции, но props оценивается во время выполнения / рендеринга.

Что вы можете сделать, это связать атрибут src, например,

<p>
  <img v-if="name" :src="`/static/emojis/${name}.png`" alt="img">
</p>