[Vuejs]-My heading tags aren't loading the way I want them to in Vue JS

by

3👍

✅

The value output using {{ ... }} we be escaped. There is no way to disable this.

To output HTML you can use v-html. However, that is not equivalent to {{ ... }} as v-html needs to be hung off an element and cannot be used to create partial content.

So you can write this:

<p v-html="'Result: ' + sleepyTime"></p>

The other option, and usually the preferred option, is to keep the markup in the template. That would look something like this:

<p>Result:
  <h1 v-if="someNumber < 5">It's okay to go back to bed.</h1>
  <h3 v-else-if="someNumber < 7">One more hours plus a cup of coffee</h3>
  <h2 v-else-if="someNumber < 9">2 more hours and 2 cups of coffee.</h2>
  <h1 v-else>Drill 3 cups of coffee. And just stay up.</h1>
</p>

You could also do it something like this:

<p>Result:
  <component :is="headingSize">{{ content }}</component>
</p>

Here headingSize and content would be computed properties that set the tag name and content respectively. You could implement them using a single property that returns an object, e.g.:

computed: {
  heading () {
    if (this.someNumber < 5) {
      return { tag: 'h1', content: "It's okay to go back to bed." }
    }

    // etc.
  }
}

with:

<p>Result:
  <component :is="heading.tag">{{ heading.content }}</component>
</p>
👤skirtle

Leave a comment