时间戳

首页 > 解决方案 > Vue.js：无法使用通过 Axios 发出的获取请求来更新数据存储变量？

vue.js - Vue.js：无法使用通过 Axios 发出的获取请求来更新数据存储变量？

问题描述

我正在使用 Vue.js。在这里，它是关于一个组件的。我的数据存储中有一个名为“comments”的变量。我想通过脚本的“created”部分更新它（因此我可以进一步通过“comments”中的 v-for 循环更新我的 html 元素）。我确实使用 Axios 发送请求。

问题：在 Axios GET 请求之后，我看到我有正确的响应，我可以将“res.data”分配给“this.comments”。正如您将在图片中看到的那样，当我遍历“this.comments”和 console.log() 时，我可以在控制台中看到结果：我看到了正确的结果。（如图所示：第 26、28、30 行）

在此循环之外，控制台中的日志精确为：Proxy.(line: 32)

但是 DataStore 中的变量“comments”没有更新。我无法遍历“评论”，因为它仍然是“未定义”......

控制台的最后一个日志（见下面的快照）；

Uncaught (in promise) TypeError: Cannot read property 'id' of undefined
    at eval (CommBox.vue?6cb4:6)

我读过这可能是因为 get 请求中使用的箭头函数和“this”的使用？

如果这是正确的，（这是因为箭头函数），我应该如何重写这段代码，所以它确实更新了 Datastore 中的变量“comments”？

PS：我不明白的是我有另一个 .vue 文件，用作视图，并且相同类型的代码（下面的代码）确实可以工作......也许对于这个组件也是因为我想要动态更新视图中的动态更新组件？

编码：

<template>
    <div>
        
        <div v-for="comment in comments" :key="comment.id" > 
            <p> {{ comments[comment].id }} </p>
        </div>

    </div>
</template>

<script>
import axios from "axios";
import "../main.css";

export default {
    name: "CommBox",
    data() {
        return {
            comments: undefined,
        }
    },
    created() {
        let MessageId = localStorage.getItem('MessageId');
        axios.get("http://localhost:3000/api/comments/" + MessageId,  { headers: {"Authorization": "Bearer " + localStorage.getItem("token")} })
        .then(res => {   
            console.log(res.data)
            for (let i in res.data) {
                console.log(res.data[i].id)
                this.comments = res.data;
                console.log(this.comments[i].id)
            }  
            this.comments = res.data;
            console.log(this.comments)
     
        })
        .catch((error) => {console.log(error)
        });
        
    }
}
</script>

控制台中的日志

标签： vue.jsaxios

解决方案

问题在这里：

    <div v-for="comment in comments" :key="comment.id" > 
        <p> {{ comments[comment].id }} </p>
    </div>

在您的情况下，comment是comments数组中的一个对象，而不是index. comments[comment]就是这样undefined，这就是它说的原因Cannot read property 'id' of undefined。尝试这个：

    <div v-for="comment in comments" :key="comment.id" > 
        <p> {{ comment.id }} </p>
    </div>

推荐阅读