[Vuejs]-How to programatically add vue directives to an element, i.e. v-if

by

0👍

As per the statement – there will be hundreds of dynamic variables that may or may not exist. but if I see in one of your comment, You said no looping. Then How you are rendering the dynamic elements ?

As per my understanding, You want to dynamically bind the data properties into HTML template. You can give a try to this solution to see if it works as per your requirement.

new Vue({
  el: '#app',
  data: {
    data: {
        heading: '<H1>Heading 1</H1>',
      title: '<h3>Title 1</H3>'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-for="(item, index) in Object.keys(data)" :key="index"  v-html="data[item]"></p>
</div>

Above code snippet will always work for the dynamic properties that exists.

Leave a comment