Level 47
use a computed property to handler the data
computed: {
newstyle () {
return this.element[0].value // assuming you bring your data into data() or props
}
}
then
<p v-html="newstyle"></p>
Aug 31, 2020
7
Level 5
JSON String data button click is not working in Vuejs
"element": [
{
"value": "<button @click='changeTheme()' class='theme-link btn btn-light'>Default</button>",
"class": "text-success"
}
]
I have bind the JSON data with Vue Component like the below:
<p v-else v-html="element[0].value"></p>
Now, I am trying to call this method. But it's not firing!
methods: {
changeTheme() {
alert("Y");
}
}
Level 28
Well, according to the doc, you can only render plain HTML.
The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
1 like
Level 5
NOT Working!
Level 28
@nafeeur10 Please read what I posted.
1 like
Level 5
Okay. But we have to Find a way to solve this problem.
Level 28
@nafeeur10 Understandable.
I have question for you :
If for some reason you have to output something dynamically based on a variable, why don't you place your element or component in the template from the get go and update its visibility/classes/props based on the dynamic variable?
Level 47
how you get this data??
Please or to participate in this conversation.