Solution 1 :

We have to use v-html directive inorder to work. Take a look at the documentation Here, check the working snippet.

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: '<a href="google.com">Hello Vue!</a>'
  }
})
.as-console-wrapper{
  display:none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.12/vue.js"></script>
<div id="app-6">
  <p v-html="message"></p>
  <textarea v-model="message"></textarea>
</div>

Solution 2 :

You could use Vue v-html directive to insert Html in div.

Working example:

new Vue({
    el: '#app',
    data: {
        html: '<a href="foo">Some link </a>'
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<textarea v-model="html"></textarea>
<div v-html="html"></div>
</div>

Problem :

I have a textarea with a v-model named content. If I input some text there, it will be assigned to content.description. Now, I want to pass this to another element, namely to a div, but – here comes the tricky part – if my textarea contains some html-code, I want this html code to be interpreted as an html-code and not as a text.

For example, if I input

<a href="foo">Some link </a>

and I pass it to the div, I want it to be rendered as a clickable link, like

some link

and not as

<a href="foo">Some link </a>

Is there any way to do it?

Comments

Comment posted by Mike L.

and that’s what’s strange – it doesn’t work! Still receive Some link as a result 🙁

Comment posted by Mike L.

do you think it may have something to do with the fact that textareas can only pass plain text?

Comment posted by Sohail Ashraf

No I don’t think, could you create a codesandbox for this.

Comment posted by Mike L.

It’s strange, with an input it works perfectly well but not with a textarea…so I guess the problem was in the textarea, thanks for your quick reply!

Comment posted by Sohail Ashraf

I have added the working example. Please take a look.

By