Vue.js Axios：HTTP GET 请求后无法更新页面

Question

我对 Vue.js 和 Axios 很陌生。我想学习它来创建一个 REST CRUD 接口。 从 HTTP GET 请求开始，到目前为止我发现的示例都在页面加载时执行 HTTP GET 并打印返回的数据。这很好用。
另一方面，我需要在单击按钮时显示数据。到目前为止，这是我编写的代码：

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

所以，我可以看到，当我点击按钮时，函数正确地调用了后端并返回了数据。但是，即使我将 users 数组设置为表中未更新的响应。 我相信我应该将我的请求设置为基于 ajax，只是到目前为止我的尝试都失败了。 有什么帮助吗？

Answer 1

您定义performGetRequest1 的脚本标签与您的Vue 实例没有关联，因此this.users = response.data 中的this 没有指向Vue 实例。相反，它可能指向全局 window 对象。您应该将 performGetRequest1 放在 Vue 实例的 methods 属性中：

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

Answer 2

我认为这里的问题是您在 2 个不同的上下文中工作：您在一个上下文中创建 Vue 应用程序，然后在完全不同的上下文中编写 Axios 脚本。 Vue 是响应式的，会更新你的 HTML，但只能使用它知道的数据。因此，您非常接近，但您只需将 Axios 脚本移动到 Vue 的上下文中！您最好的选择是将performGetRequest1 转换为 Vue 方法。

此外，按钮上的“onclick”处理程序是一个 Javascript 处理程序，而不是 Vue 将要监听的东西。您应该使用v-on:click（或简写，@click）属性来监听点击事件。

查看 Vue 文档的“处理用户输入”部分：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>