title: Vue.js dynamically appending HTML when clicking on a button
body: <p>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.</p>
  
  <p>So the following code is my HTML code which comprises of the div element with the id <code>objectiveArea</code> that vue will render to and a hard coded button for the users to add more entries.</p>
  
  <pre><code>&lt;div class="form-group" id="objectiveArea"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="button" value="Add Objective" id="addButton" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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 <code>addNewObjectiveRow</code> serves as a template to append when the user clicks add and the <code>objectiveElements</code> is a template for vue to render the existing JSON to the HTML.</p>
  
  <pre><code>function addNewObjectiveRow(value) {
              var $divElements = "&lt;div class='row'&gt;"
                  + "&lt;div class='form-inline'&gt;"
                  + "&lt;br /&gt;&lt;div class='form-group'&gt;&lt;label class='control-label'&gt;Title&lt;/label&gt;&lt;div class=''&gt;&lt;input type='text' class='form-control objectivetitle' placeholder='Title' /&gt;&lt;/div&gt;&lt;/div&gt;"
                  + "&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;"
                  + "&lt;div class='form-group input-group'&gt;&lt;label class='control-label'&gt;Target Completion Date&lt;/label&gt;&lt;div class=''&gt;&lt;input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' /&gt;&lt;span class='input-group-addon'&gt;&lt;i class='glyphicon glyphicon-calendar'&gt;&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;"
                  + "&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;"
                  + "&lt;div class='form-group'&gt;&lt;label class='control-label'&gt;&lt;/label&gt;&lt;div&gt;&lt;input type='button' value='Remove Goal' class='btn-remove btn-danger deleteButton' /&gt;&lt;/div&gt;&lt;/div&gt;"
                  + "&lt;/div&gt;"
                  + "&lt;br /&gt;"
                  + "&lt;div class='form-group'&gt;&lt;label class='control-label'&gt; Details&lt;/label&gt;&lt;div&gt;&lt;textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...'&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;hr /&gt;"
                  + "&lt;/div&gt;"
              return $divElements;
          }
  
  var objectiveElements = "&lt;div class='row'&gt;&lt;div v-for='(objective, index) in objectivesData'&gt;"
              + "&lt;div class='form-inline'&gt;"
              + "&lt;br /&gt;&lt;div class='form-group'&gt;&lt;label class='control-label'&gt;Title&lt;/label&gt;&lt;div class=''&gt;&lt;input type='text' class='form-control objectivetitle' placeholder='Title' v-model='decodeData(objective.Title)' /&gt;&lt;/div&gt;&lt;/div&gt;"
              + "&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;"
              + "&lt;div class='form-group input-group'&gt;&lt;label class='control-label'&gt;Target Completion Date&lt;/label&gt;&lt;div class=''&gt;&lt;input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' v-formatdate='objective.TargetDate' /&gt;&lt;span class='input-group-addon'&gt;&lt;i class='glyphicon glyphicon-calendar'&gt;&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;"
              + "&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;"
              + "&lt;div class='form-group'&gt;&lt;label class='control-label'&gt;&lt;/label&gt;&lt;div&gt;&lt;input type='button' v-if='(index &gt; 0)' value='Remove Goal' class='btn-remove btn-danger deleteButton' /&gt;&lt;/div&gt;&lt;/div&gt;"
              + "&lt;/div&gt;"
              + "&lt;br /&gt;"
              + "&lt;div class='form-group'&gt;&lt;label class='control-label'&gt; Details&lt;/label&gt;&lt;div&gt;&lt;textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...' v-model='decodeData(objective.Details)'&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;hr /&gt;"
              + "&lt;/div&gt;&lt;/div&gt;";
  
  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
  </code></pre>
  
  <p>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?</p>