0

I am using a v-for"item in items" then I have values in my {{ item.data }} which is an html element but with a values already, example

{{ item.data }} has a value of a string "<'qr-code value="this has specific infos that is already created for this specific code" '>"

so when I would run it on my page with just {{ item.data }} , this will show up

<'qr-code value="this has specific infos that is already created for this specific code" '>

it prints the html code and not running it.

BUT when i try to copy that code and paste it in my html, it works. it is just how can I make this string code into an actual working HTML code How can i resolve this?

Improve this question

2 Answers 2

Reset to default
1

The directive v-html will render content from string as plain HTML, you can use like this example.

<div v-html=“yourVar”></div>

If you need more information, here more examples:

https://nexladder.com/vuejs-tutorial/vuejs-v-html-directive

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

3 Comments

I have tried that BUT there would be a problem. If I would place it in my data -> content: then the value would fixed and not dynamic as how I wanted it to be.
because im using {{ items.data }} from a for loop, if I put a v-html on a tag, all of my iteration would have the same value because of the fixed content.
Try to use this.$forceUpdate() right after your loop ends
0

If I understood the situation correctly you are looking for the component tag.

You can use :is="" to set the element node type.

You can find more information here: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.