Question 296278 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to style certain parts of template literal

I have a template literla in my method (vue.js):

methodNameDisplay(m) {
  let nameToDisplay = '';
  if (m.friendlyName === m.methodName) {
    nameToDisplay = m.friendlyName;
  } else {
    nameToDisplay = `${m.friendlyName} - ${m.methodName}`;
  }
  return nameToDisplay;
}

This method is used to return the value of a title here:

<MethodRepeaterTitle :title="showMName ? methodNameDisplay(m) :m.friendlyName" />

The issue I am facing is that I need to style the second part of the template literal after the hyphen. How can I go about doing this?

I have tried adding a span to the template literal but this just renders as a string, Vue does not recognize the tag.

Tags:

2

Answers


  1. 0

    To solve your problem you can use v-html.

    I imagine you have something like this inside your component

    <div>
 {{ title }}
</div>

    Two handle and render html you need to do this:

    <div v-html="title" />

    Like this is say in comment, this can lead to xss attacks. But if you render nothing from the api it’s not relevant. In other case you case use a pakage to clean the v-html like dom-purify.

    Login or Signup to reply.
  2. 0

    You should use the vue slot API. Here is the document.

    https://vuejs.org/guide/components/slots.html

    With the slot, you can use the vue template in your code

    <MethodRepeaterTitle>
  // .... your template
</MethodRepeaterTitle>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search