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

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Bert, Oct 10 '17 at 20:39
Use an arrow function for your callback and use `this.test = response.data`. — Bert, Oct 10 '17 at 20:40
Didnt know the ex president of Serbia was a Vue enthusiast :D — melvudin, Mar 31 '20 at 16:49

ceejayoz · Accepted Answer · 2017-10-10T21:56:52.437

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.

Yeeep, just realized that, thanks for the full clarification on this one mate! Thanks a lot! I suppose Im too used to Jquery haha, gotta love this Vue.js. — Tomislav Nikolic, Oct 10 '17 at 21:21
@TomislavNikolic Vue was as big a leap forwards for me as jQuery was. The sort of thing that makes you go "whyyyyyy didn't I have this before?!" Glad I could help, and enjoy! — ceejayoz, Oct 10 '17 at 21:56

Eric G · Answer 2 · 2018-05-23T16:59:56.960

3

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?

edited May 23 '18 at 16:59

answered Oct 10 '17 at 20:48

Eric G

2,577
1
14
21

This is accurate, but there are better approaches than the messy `var self = this` approach these days. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind – ceejayoz Oct 10 '17 at 20:57
1

Thanks but Im not asking about "this" I am asking about how to append that data somewhere inside the HTML – Tomislav Nikolic Oct 10 '17 at 21:08
@TomislavNikolic You are, though. Setting `this.whatever` means you can use `{{ whatever }}` in your component's HTML. If it's a complex object, you can also do stuff like `v-for="item in whatever"` and whatnot. – ceejayoz Oct 10 '17 at 21:14
@ceejayoz thanks, I now understand how it all works, I was expecting to write some HTML to append etc, I thought it works differently, thanks for clarifying! – Tomislav Nikolic Oct 10 '17 at 21:23

score 1 · Answer 3 · answered Oct 10 '17 at 21:20

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.

Appending HTML elements with Vue.js

3 Answers3

Linked