Changing Vue.js example to use ajax

Question

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.

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.

How would I change things to make this load from ajax?

My js:

Vue.component('item', {
    template: '#item-template',
props: {
    model: Object
},
data: function() {
    return {
        open: false
    }
},
computed: {
    isFolder: function() {
        return this.model.children && 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;

            }
        });
    }
}
})

the template :

<script type="text/x-template" id="item-template">
  <li>
    <div
      :class="{bold: isFolder}"
      @click="toggle"
      @dblclick="changeType">
      @{{model.name}}
      <span v-if="isFolder">[@{{open ? '-' : '+'}}]</span>
    </div>
    <ul v-show="open" v-if="isFolder">
      <item
        class="item"
        v-for="model in model.children"
        :model="model">
      </item>
    </ul>
  </li>
</script>

And the html:

<ul id="demo">
  <item
    class="item"
    :model="treeData">
  </item>
</ul>

Then why you've changed the position of var self = this;? In your script (success: function() { var self = this; self.treeData = data; }) self has the wrong value. — Andreas
– Andreas, Commented Sep 13, 2016 at 14:21
Im not sure i understand - treeData, ends up having the correct data from the server... where should it be? — aarcarr
– aarcarr, Commented Sep 13, 2016 at 14:24
Check the value of self.treeData before assigning data to it (stackoverflow.com/questions/6394812/…) — Andreas
– Andreas, Commented Sep 13, 2016 at 14:38

Andreas · Accepted Answer · 2016-09-13 15:21:09Z

3

The problem is in the $.ajax() call. The value of self in the success handler has the wrong value

success: function(data) {
    var self = this;    // this = jqXHR object
    self.treeData = data;
}

Either use the context option and this.treeData

$.ajax({
    url: 'http://example.com/api/categories/channel/treejson',
    type: 'get',
    context: this,    // tells jQuery to use the current context as the context of the success handler
    dataType: 'json',
    async: false,
    success: function (data) {
        this.treeData = data;
    }
});

Or move the var self = this line in the correct place right before $.ajax();

fetchData: function () {
    var self = this;

    $.ajax({
        url: 'http://example.com/api/categories/channel/treejson',
        type: 'get',
        dataType: 'json',
        async: false,
        success: function (data) {
            self.treeData = data;
        }
    });
}

edited Sep 13, 2016 at 15:21

answered Sep 13, 2016 at 14:53

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

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

Collectives™ on Stack Overflow

Changing Vue.js example to use ajax

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related