Vue 3 component - trying to call AJAX

Question

I am trying to use Vue to make a bootstrap modal dynamic...

Component HTML:

 <div id="commentList">
     <comment-list
         v-for="comment in comments"
         :key="comment.id"
         :content="comment.content"
     ></comment-list>
 </div>

JS

<script>
 const app = Vue.createApp({
        data() {
            return {
                comments: []
            };
        },
        created () {
            this.fetchComments();
        },
        methods: {
            fetchComments: function () {
                $.ajax({
                    url: '/activity/head/52',
                    method: 'GET',
                    success: function (data) {
                        this.comments = data;
                    }
                });
            }
        }
    });

    app.component('comment-list', {
        props: ['content'],
        delimiters: ['{:', ':}'],
        template:
            `
                <div class="row my-4">
                    <div class="col-1"><img src="/photo-alex.jpg" class="rounded-circle" style="width:38px; height: 38px"></div>
                    <div class="col-11 p-3 text-muted rounded bg-white border">
                        {:content:}
                    </div>
                </div>
            `
    });

    app.mount('#commentList');
</script>

The AJAX request isn't being executed, so that's the first issue I am encountering, thoughts?

AJAX response:

[
  {
    id: 76,
    ago: "in 4 hours",
    user: "Alex",
    content: "THIS IS A COMMENT"
  }
]

I've changed some code and fixed a few issues which were shown in console.log() the AJAX is now being called, but no errors in the console.log and no results are shown??? Ideas? — Alex.Barylski
– Alex.Barylski, Commented Nov 16, 2020 at 20:01
Could you create a minimal reproducible example which would repro the issue. I suggest using codesanbox.io or similar. What you have should work. Although this might be related to using Vue 2 syntax in Vue 3. Not yet versed in 3. Just to make sure, try using latest vue 2 instead of whatever version you're using. — tao
– tao, Commented Nov 16, 2020 at 20:12
Sorry my bad, I pasted from the wrong window initially...I had some simple errors caused by copy-paste from another window, which I also ran locally and didn't notice. The above is error free but also not working. — Alex.Barylski
– Alex.Barylski, Commented Nov 16, 2020 at 20:12
Nevermind, I spotted the issue. this in fetchData is not the Vue instace. I'll post an answer. — tao
– tao, Commented Nov 16, 2020 at 20:15

tao · Accepted Answer · 2020-11-16 20:31:56Z

2

You're using a normal function for $ajax.success. Inside it, this is that function's context, not the Vue instance. Change it to an arrow function so it has access to the outer scope, which will allow it to assign the response to the Vue instance's comments. Basically:

fetchComments: function() {
  $.ajax({
    url: '/activity/head/52',
    method: 'GET',
    success: function(data) {
      this.comments = data;
    }
  });
}

Should become:

fetchComments() {
  $.ajax({
    url: '/activity/head/52',
    method: 'GET',
    success: data => {
      this.comments = data;
    }
  });
}

Note: changing from fetchComments: function(){ ... } to fetchComments() { ... } is irrelevant. They're the same thing, it's just I prefer the shorter syntax.

What matters is changing success from function(data) { ... } to data => { ... }.

edited Nov 16, 2020 at 20:31

answered Nov 16, 2020 at 20:16

tao

91.1k18 gold badges138 silver badges174 bronze badges

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

7 Comments

Alex.Barylski Over a year ago

Still not rendering the list...I feel it's the Vue3 requirement of data() having to be a function now???

tao Over a year ago

Yep, I made a mistake. Just corrected it. The method should be a function(). It's only the ajax call that should be an arrow function. I'll also reformulate to be exact and specific, so it's helpful :)

Alex.Barylski Over a year ago

That didn't do it either...how would I access the property "comments" with it being wrapped in a function?

Alex.Barylski Over a year ago

OK sorry - I missed the fetchComments()

tao Over a year ago

It's ok. You can either write it as methods: { fetchComments() { ... }} or methods: { fetchComments: function() { ... }}. It's exactly the same thing. I personally prefer the first syntax. For me, it's more readable but I'm aware it's a personal choice.

|

Collectives™ on Stack Overflow

Vue 3 component - trying to call AJAX

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related