title: Appending HTML elements with Vue.js
body: <p>So I am really new to this <code>Vue.js</code> and what I am trying to achieve is simple, I am trying to append the results of this <code>Ajax</code> request into my list</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;button v-on:click="buttonClick"&gt;Test&lt;/button&gt;
  
      &lt;ul id="example-1"&gt;
          &lt;li v-for="t in test"&gt;
              {{ t }}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;script&gt;
      var app = new Vue({
          el: '#app',
          data: {
              'message': 'hello world',
              'test': null
          },
          methods: {
              buttonClick: function() {
                  axios.get('api/getdata')
                      .then(function(response) {
                          test = response.data;
                          //if this was Jquery I'd use $('li').append here
                      })
                      .catch(function(error) {
  
                      });
              }
          }
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>Now the problem is I don't know how to do it, my variable <code>test</code> should hold all the data and then I should just loop it as I did, but how I trigger it again once I got the data?</p>
  
  <p>EDIT: Just to clarify, I am not asking question about "this" and "self" I am asking on how to APPEND this data onto some HTML element</p>