How to pass a props value to a JS function from Vue component

Question

I have a JS file with a function and component as below:

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>`})

I call that component from HTML as below

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

Image of ron doesnt show up. But if i declare my component as below it works:

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

So the image ron exists and works fine. I am just unable to pass value of props name to the function emojify. How can that be done?

ERASE ALL PICTURES OF RON.

Maximilian Burszley
– Maximilian Burszley

2018-11-07 23:27:04 +00:00
Commented Nov 7, 2018 at 23:27 — Maximilian Burszley
– Maximilian Burszley, Commented Nov 7, 2018 at 23:27

Phil · Accepted Answer · 2018-11-07 23:28:04Z

2

You cannot do this as the template is computed at compilation time but props are evaluated at run / render time.

What you can do is bind the src attribute, eg

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

answered Nov 7, 2018 at 23:28

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass a props value to a JS function from Vue component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related