javascript - Vue.js 公理 : unable to update page after HTTP GET request

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>

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

Answer 1

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

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

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