Appending HTML elements with Vue.js

Question

So I am really new to this Vue.js and what I am trying to achieve is simple, I am trying to append the results of this Ajax request into my list

<div id="app">
    <button v-on:click="buttonClick">Test</button>

    <ul id="example-1">
        <li v-for="t in test">
            {{ t }}
        </li>
    </ul>
</div>
<script>
    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) {

                    });
            }
        }
    })
</script>

Now the problem is I don't know how to do it, my variable test 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?

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

Answer 1

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

You may not have asked in those specific words, but they're key to doing what you want to do.

Your code is so close, you just need to understand JavaScript's variable scope. The line test = response.data; as-written is doing basically nothing - test only exists within your function (response) {} block. It doesn't exist outside it, and as such the rest of the component can't see it.

By properly setting this.test: (the .bind(this) is critical here)

axios.get('api/getdata')
.then(function (response) {
    this.test = response.data;
}.bind(this))
.catch(function (error) {

});

... test will become available to your template, and this bit will work as it should:

<ul id="example-1">
    <li v-for="t in test">
        {{ t }}
    </li>
</ul>

(Assuming response.data is what you expect it to be, of course.)

One of the major points of using Vue is that you're never doing raw appends of HTML like you'd do in jQuery. Instead, you set data in the component, and the component adjusts its HTML automatically to fit that data.

Answer 2

You need to reference the current instance to set test. Something like the following will work for you:

methods: {
    buttonClick: function() {
        var self = this;
        axios.get('api/getdata')
        .then(function (response) {
            self.test = response.data;
        })
        .catch(function (error) {

        });
    }
}

And for some good information on how this works:

How does the "this" keyword work?

Answer 3

Perhaps because you are used to working with a library like jQuery you are thinking in terms of appending something to the DOM. Vue is data driven, so if you have a list like yours...

<ul>
     <li v-for="t in test">
            {{ t }}
     </li>
</ul>

And you have your property like...

data: {
    test: []
}

If then you were to do something like this...

this.test.push('list-item-1');
this.test.push('list-item-2');

Since the data is already bound to your list with the v-for the moment you update the test array an item or items will be added to your list. You dont need to append anything. Vue watches and changes the list dynamically as the value of test changes.