Vue.js dynamically appending HTML when clicking on a button

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?

Answer

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>

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

Advertisement

Answer