Vue.js dynamically appending HTML when clicking on a button

Question

So basically what I am trying to achieve is allowing the user to be able to add to an existing set of information that will be passed on to Vue from JSON.

So the following code is my HTML code which comprises of the div element with the id objectiveArea that vue will render to and a hard coded button for the users to add more entries.

<div class="form-group" id="objectiveArea"></div>
<div><input type="button" value="Add Objective" id="addButton" /></div>

And here is my Javascript where I pass the JSON into vue for it to render as well as having an onclick event when the add button is triggered. The function addNewObjectiveRow serves as a template to append when the user clicks add and the objectiveElements is a template for vue to render the existing JSON to the HTML.

function addNewObjectiveRow(value) {
            var $divElements = "<div class='row'>"
                + "<div class='form-inline'>"
                + "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' /></div></div>"
                + "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"
                + "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>"
                + "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"
                + "<div class='form-group'><label class='control-label'></label><div><input type='button' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>"
                + "</div>"
                + "<br />"
                + "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...'></textarea></div></div><hr />"
                + "</div>"
            return $divElements;
        }

var objectiveElements = "<div class='row'><div v-for='(objective, index) in objectivesData'>"
            + "<div class='form-inline'>"
            + "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' v-model='decodeData(objective.Title)' /></div></div>"
            + "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"
            + "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' v-formatdate='objective.TargetDate' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>"
            + "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"
            + "<div class='form-group'><label class='control-label'></label><div><input type='button' v-if='(index > 0)' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>"
            + "</div>"
            + "<br />"
            + "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...' v-model='decodeData(objective.Details)'></textarea></div></div><hr />"
            + "</div></div>";

var data = JSON.parse('[{"Title":"Title One","TargetDate":"21 June 2017","Details":"Details One"},{"Title":"Title Two","TargetDate":"22 June 2017","Details":"Details Two"}]');
var Objectives = Vue.extend({
       template: objectiveElements,
       data: function () {
              return {
                objectivesData: data
                     }
              }
       })

new Objectives().$mount('#objectiveArea');

$('#addButton').on('click', function () {
   $('#objectiveArea').append(addNewObjectiveRow(""));               
});//end addButton on click

However, the above code renders the existing information from the JSON just fine in the HTML but when I click on the add button, nothing happens at all. Am I missing something or getting it all wrong?

Alright, do you know of a better way to go around this issue? — Gabriel K.
– Gabriel K., Commented Jun 20, 2017 at 6:53

tony19 · Accepted Answer · 2022-07-15 01:14:43Z

5

https://v2.vuejs.org/v2/guide/list.html

HTML

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
<button @click="addItem()">Add new item</button>

JS

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  },
  methods: {
    addItem(){
      this.items.push({message: 'new message'})
    }
  }
})

Clicking the button will execute addItem() method which will add a new item into data items and it will automatically render new li

edited Jul 15, 2022 at 1:14

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 20, 2017 at 7:11

Mykola Riabchenko

6189 silver badges24 bronze badges

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

1 Comment

Gabriel K. Over a year ago

Thanks for the helpful response! I have since added an v-on:click attribute to my button and updated the array of objects when adding and it works now (:

tony19 · Accepted Answer · 2022-07-16 04:11:41Z

0

there are many mistakes

the function addNewObjectiveRow(value)you don't use the parameter value.
Vue is data-driven, you should change the objectivesData, not simply append the string. Read the document

edited Jul 16, 2022 at 4:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 20, 2017 at 8:39

ethan_you

2461 silver badge4 bronze badges

1 Comment

Gabriel K. Over a year ago

I realized that I should've changed objectivesData after reading the docs earlier on. Thanks for the response!

Collectives™ on Stack Overflow

Vue.js dynamically appending HTML when clicking on a button

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related