As the title state, I want to try adding a html element <br /> inside a data bind, but i can't do it right, I'm quite confused of how to do it right

let say I have this text I like to playing games and I want to add <br /> like this I like playing <br /> games, it sound simple right? but I can't do this right inside data-bind.

this is my code:

<aqua-text
 class="text-position"
 :b-section-title="'I like to playing' + <br /> + 'games'"
 :description="
 'Game is fun after all'
 "
/>

this is what <aqua-text> looks like:

<template>
  <div>
    <h1>{{ bSectionTitle}}</h1>

    <h2 class="bold">
      {{ description}}
    </h2>
  </div>
</template>

<script>
export default {
  props: {
    bSectionTitle: {
      type: [String]
    },
    description: {
      type: [String]
    },
  }
};
</script>

can someone help me to solve this and explain where I'm wrong in here?

As the title state, I want to try adding a html element <br /> inside a data bind, but i can't do it right, I'm quite confused of how to do it right

let say I have this text I like to playing games and I want to add <br /> like this I like playing <br /> games, it sound simple right? but I can't do this right inside data-bind.

this is my code:

<aqua-text
 class="text-position"
 :b-section-title="'I like to playing' + <br /> + 'games'"
 :description="
 'Game is fun after all'
 "
/>

this is what <aqua-text> looks like:

<template>
  <div>
    <h1>{{ bSectionTitle}}</h1>

    <h2 class="bold">
      {{ description}}
    </h2>
  </div>
</template>

<script>
export default {
  props: {
    bSectionTitle: {
      type: [String]
    },
    description: {
      type: [String]
    },
  }
};
</script>

can someone help me to solve this and explain where I'm wrong in here?

• javascript
• vue.js
• vue-ponent
• nuxt.js

1 Answer 1

Replace

<h1>{{ bSectionTitle}}</h1>

by this:

<h1 v-html="bSectionTitle"></h1>

In the documentation they say:

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive

But note that:

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

If you need to render user-provided content use any html sanitizer before passing the content to v-html