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 :

<article class="col-md-11 col-md-offset-1 card" custom_attrib=atrrib_value> <span>
{{NEW VALUE}} - {{NEW VALUE_2}}
</span>
<span >
<button class="btn btn-theme btn-default btn-xs pull-left" @click="deleteItem" ><i class="fa fa-times inline"></i></button>
</span>
</article>

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

Are you saying that each time the actual name 'custom_attrib` of the attribute will be different? Or just the value? — skribe
– skribe, Commented Sep 20, 2018 at 11:53
So the trouble you are facing is if you update the attrib it changes the previous ones right? And do the old rows ever need to get updated? Or once they are created the content will stay the same? — skribe
– skribe, Commented Sep 20, 2018 at 11:57
trouble im having is i dont know how to actually append the html to my div in general — Pc Monk
– Pc Monk, Commented Sep 20, 2018 at 11:58
You don't have to append HTML to the DOM manually, just use Vue's list rendering (data-driven approach): vuejs.org/v2/guide/… — Bennett Dams
– Bennett Dams, Commented Sep 20, 2018 at 12:23

Jon Musselwhite · Accepted Answer · 2019-11-26 21:53:35Z

6

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 = ['</br><input type="text"/>','<input type="text"/></br>'];
      this.items.push(this.item);
    }
  }
  
})

<h2>Vue.js</h2>

<div id="app">

<article class="col-md-11 col-md-offset-1 card" custom_attrib=atrrib_value> 
<span v-for="item in items" ><span v-html="item[0]"></span> - <span v-html="item[1]"></span></span>
<span >
<button v-on:click="add" class="btn btn-theme btn-default btn-xs pull-left">
+
</button>
</span>
</article>

</div>

<!-- Vue.js -->
<script src="https://vuejs.org/js/vue.min.js"></script>

edited Nov 26, 2019 at 21:53

Jon Musselwhite

1,89116 silver badges27 bronze badges

answered Sep 20, 2018 at 12:51

Ahmed Helal Ahmed

3252 silver badges11 bronze badges

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

5 Comments

Pc Monk Over a year ago

Highly appreciate it my friend ,the article itself contains css so can we put the v-for on the article itself ?

Ahmed Helal Ahmed Over a year ago

Ahmed Helal Ahmed Over a year ago

you can make it like that

Pc Monk Over a year ago

thanks dude, now im getting vue.js?3de6:1743 TypeError: Cannot read property '_withTask' of undefined , can u help me on that too ? that would be awsome

Pc Monk Over a year ago

stackoverflow.com/questions/52425393/… again thanks for this

Collectives™ on Stack Overflow

Add Html element in div vuejs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related