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

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

此外，按钮上的“ onclick”处理程序是Javascript处理程序，不是Vue会听的东西。您应该使用v-on:click（或简写为@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>

Answer 2

您在其中定义x_group_list = [[i for i in range(k * 100,(k + 1)*100)] for k in range(0,10)] y_group_list = [[i for i in range(k * 100,(k + 1)*100)] for k in range(0,10)]的脚本标记未与Vue实例相关联，因此performGetRequest1中的this并未指向Vue实例。相反，它可能指向全局this.users = response.data对象。您应该将window放在Vue实例的performGetRequest1属性中：

methods

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

2 个答案: