Q:

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

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?

A:

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://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>

