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? — Bert
– Bert, Commented Oct 10, 2017 at 20:39
Use an arrow function for your callback and use this.test = response.data. — Bert
– Bert, Commented Oct 10, 2017 at 20:40
Didnt know the ex president of Serbia was a Vue enthusiast :D — melvudin
– melvudin, Commented Mar 31, 2020 at 16:49

ceejayoz · Accepted Answer · 2017-10-10 21:56:52Z

6

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.

edited Oct 10, 2017 at 21:56

answered Oct 10, 2017 at 21:17

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

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

2 Comments

Tomislav Nikolic Over a year ago

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.

ceejayoz Over a year ago

@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!

Eric G · Accepted Answer · 2018-05-23 16:59:56Z

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, 2018 at 16:59

answered Oct 10, 2017 at 20:48

Eric G

2,6271 gold badge16 silver badges22 bronze badges

4 Comments

ceejayoz Over a year ago

This is accurate, but there are better approaches than the messy var self = this approach these days. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Tomislav Nikolic Over a year ago

Thanks but Im not asking about "this" I am asking about how to append that data somewhere inside the HTML

ceejayoz Over a year ago

@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.

Tomislav Nikolic Over a year ago

@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!

skribe · Accepted Answer · 2017-10-10 21:20:43Z

1

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.

answered Oct 10, 2017 at 21:20

skribe

3,6254 gold badges30 silver badges36 bronze badges

Collectives™ on Stack Overflow

Appending HTML elements with Vue.js

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related