We can add custom attributes to elements programmatically using pure JS, like element.attr('data-attr', someValue)
, but like v-if
What about the Vue directive
Given the following elements
<p v-html="data.title"></p>
How to add v-if programmatically? I'm asking this for automation purposes as there will be hundreds of dynamic variables that may or may not exist.
The expected result is
<p v-if="data.title" v-html="data.title"></p>
The only step I know of is to use ref
to get the element in created()
.
According to the declaration - There will be hundreds of dynamic variables that may or may not exist. But if I see in your comment, you said >No loops. So how do you render dynamic elements?
From my understanding, you want to dynamically bind the data attributes into the HTML template. You can give this solution a try and see if it meets your requirements.
The code snippet above always works with existing dynamic properties.