Vue.js Axios: unable to update page after HTTP GET request

Question

I'm quite new to Vue.js and Axios. I'd like to learn it to create A REST CRUD Interface. Starting from the HTTP GET request, the examples I've found so far all execute an HTTP GET when the page load and print the returned data. That works pretty well.
On the other hand, I need to display the data when I click a button. Here's what I have coded so far:

<script>

new Vue({
    el: "#app",
    data() {
        return {
            users: []
        }
    },

})
</script>

<script>
   function performGetRequest1() {
        axios
            .get('http://localhost:8080/users')
            .then(response => {
                this.users = response.data,
            })
            .catch(function (error) {
                console.log(error);
            })
   }
</script>


<button  onclick="performGetRequest1()">Get Todos</button>



<tr v-for="user in users" :key="user.id">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.surname}}</td>
</tr>

So, I can see that when I hit the button the function correctly invokes the backend and data is returned. However, even if I set the users array to the response that is not updated in the table. I believe I should set my request to be ajax based, just my attempts so far have failed. Any help?

tony19 · Accepted Answer · 2022-07-15 05:45:08Z

2

I believe the issue here is that you are working in 2 different contexts: you create the Vue app in one context and then you write the Axios script in a totally different context. Vue is reactive and will update your HTML, but only with data that it knows about. Thus, you're very close, but you just need to move your Axios script into Vue's context! Your best bet is going to be turning performGetRequest1 into a Vue method.

Additionally, your "onclick" handler on the button is a Javascript handler and not something Vue is going to listen to. You should be using the v-on:click (or shorthand, @click) prop to listen for the click event.

Check out the "Handling User Input" section of the Vue docs: https://v2.vuejs.org/v2/guide/#Handling-User-Input

<script>

new Vue({
    el: "#app",
    methods: {
        performGetRequest1() {
           axios
            .get('http://localhost:8080/users')
            .then(response => {
                this.users = response.data
            })
            .catch(function (error) {
                console.log(error);
            })
      }
    }
    data() {
        return {
            users: []
        }
    },

})
</script>

<button @click="performGetRequest1">Get Todos</button>

<tr v-for="user in users" :key="user.id">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.surname}}</td>
</tr>

edited Jul 15, 2022 at 5:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 12, 2019 at 16:00

Colin

2,4863 gold badges35 silver badges52 bronze badges

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

3 Comments

Carla Over a year ago

Thanks for your reply! I get an error 'SyntaxError: expected expression, got '}' just after this.users = response.data,. I'm trying to figure out why, it seems correct to me...

Colin Over a year ago

Ahh you have an extra comma there I didn't notice. Just remove that comma and you should be good! (answer updated)

Matt U Over a year ago

Good call on the click event handler, I didn't notice that so I didn't call it out in my answer.

Matt U · Accepted Answer · 2019-12-12 15:58:13Z

1

Your script tag where you define performGetRequest1 is not associated with your Vue instance, so the this in this.users = response.data is not pointing to the Vue instance. Instead, it's likely pointing to the global window object. You should put performGetRequest1 in the Vue instance's methods property:

new Vue({
  el: '#app',
  data () {
    return {
      users: []
    }
  },
  // ADD THE CODE BELOW
  methods: {
    performGetRequest1 () {
      // Load the data
    }
  }
}

answered Dec 12, 2019 at 15:58

Matt U

5,12812 silver badges28 bronze badges

Collectives™ on Stack Overflow

Vue.js Axios: unable to update page after HTTP GET request

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related