title: Changing Vue.js example to use ajax
body: <p>Im using Vue.js in my latest project and in part  of the project i need to render a tree view which is stored in a db - Im using the Vue.js tree view example as a base and have the data coming from my server in the correct format. </p>
  
  <p>Ive found a way to modify the example to load the data from js but by the time it does, the component has already been rendered. Ive checked that the data works when I preload a var with the data from the server.</p>
  
  <p>How would I change things to make this load from ajax?</p>
  
  <p>My js:</p>
  
  <pre><code>Vue.component('item', {
      template: '#item-template',
  props: {
      model: Object
  },
  data: function() {
      return {
          open: false
      }
  },
  computed: {
      isFolder: function() {
          return this.model.children &amp;&amp; this.model.children.length
      }
  },
  methods: {
      toggle: function() {
          if (this.isFolder) {
              this.open = !this.open
          }
      },
      changeType: function() {
          if (!this.isFolder) {
              Vue.set(this.model, 'children', [])
              this.addChild()
              this.open = true
          }
      }
  }
  })
  
  var demo = new Vue({
      el: '#demo',
  data: {
      treeData: {}
  },
  ready: function() {
      this.fetchData();
  },
  methods: {
      fetchData: function() {
          $.ajax({
              url: 'http://example.com/api/categories/channel/treejson',
              type: 'get',
              dataType: 'json',
              async: false,
              success: function(data) {
  
                  var self = this;
                  self.treeData = data;
  
              }
          });
      }
  }
  })
  </code></pre>
  
  <p>the template : </p>
  
  <pre><code>&lt;script type="text/x-template" id="item-template"&gt;
    &lt;li&gt;
      &lt;div
        :class="{bold: isFolder}"
        @click="toggle"
        @dblclick="changeType"&gt;
        @{{model.name}}
        &lt;span v-if="isFolder"&gt;[@{{open ? '-' : '+'}}]&lt;/span&gt;
      &lt;/div&gt;
      &lt;ul v-show="open" v-if="isFolder"&gt;
        &lt;item
          class="item"
          v-for="model in model.children"
          :model="model"&gt;
        &lt;/item&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>And the html: </p>
  
  <pre><code>&lt;ul id="demo"&gt;
    &lt;item
      class="item"
      :model="treeData"&gt;
    &lt;/item&gt;
  &lt;/ul&gt;
  </code></pre>