Add Html element in div vuejs

Question

I have been searching for 4 hours , cant even get my head to understand what to use basically i want to add a new row (article tag) to a div element , everytime the user press the addbutton in my method how can i pass this HTMLto the div :

 
{{NEW VALUE}} - {{NEW VALUE_2}}

I have to say i need to put some custom attrib on the Article tag each time thats why i want to make a new tag on each request if we take a look at this https://codepen.io/Pizzi/pen/GMOQXy when pressing the + (add) a row drops , i want to do the same thing but the important part is the new row with article tag needs new custom_attrib and value everytime

another jsfiddle example : https://jsfiddle.net/50wL7mdz/17736/ instead of those input box will be my article with custom attrib and value

user_8844879 · Answer

You make an array. When the user clicks "add new" you will append a new item to the array which contains HTML with two input fields. When you append it, Vuejs will re-render the HTML with the changed data.

// Vue.js
new Vue({
  el: '#app',
  data: {
   items:[],
   item:['NEW VALUE','NEW VALUE_2'],
   
  },
  created(){
   this.items.push(this.item);
  },
  methods: 
  {
    add()
    {
      this.item = ['
','
'];
      this.items.push(this.item);
    }
  }
  
})

Vue.js



 
 -

Add Html element in div vuejs

1 Answers