Php 如何解决类型错误：can'；t访问属性0，\u vm.allCounts.teacherScont未定义

在我的vue文件中，我对axio的定义如下：

getCounts(){
   axios.get('api/get-count').then(response => {
   this.allCounts = response.data.more;
   console.log(this.allCounts)
   });
},

运行打印的console.log后，如下图所示，

我访问这些数据

{{allCounts.teachersCount[0] ? allCounts.teachersCount[0] : "-"}}
{{allCounts.studentsCount[0] ? allCounts.studentsCount[0] : "-"}}
{{allCounts.subjectsCount[0] ? allCounts.subjectsCount[0] : "-"}}

在我的网页中打印值没有任何问题，但是如果我查看我的控制台，它会显示以下错误：

getCounts(){
   axios.get('api/get-count').then(response => {
   this.allCounts = response.data.more;
   console.log(this.allCounts)
   });
},

---

数据显示时没有任何问题，但控制台中显示了此错误，我如何解决此问题？

此处可能存在的问题是，在返回响应之前，模板正在尝试访问allCounts的未定义索引

在初始化allCounts时，您应该放置：

例如，如果在数据中：

    data() {
        return {
            ...
            allCounts: {
                studentsCount: ['-'],
                subjectsCount: ['-'],
                teachersCount: ['-'],
            },
            ...
        };
    },

如果您这样定义它，那么在得到响应之前，您的模板将不会有错误

为了避免使vue代码明确了解后端响应的结构，您可以计算如下属性：

    computed: {
    ...
        studentsCount(field) {
            if (this.allCounts.studentCount) {
                return this.allCounts.studentCount[0];
            }

            return '-';
        },

        teachersCount(field) {
            if (this.allCounts.teachersCount) {
                return this.allCounts.teachersCount[0];
            }

            return '-';
        },

        subjectsCount(field) {
            if (this.allCounts.subjectsCount) {
                return this.allCounts.subjectsCount[0];
            }

            return '-';
        },
    ...
    }

并在模板中引用它们，如：

{{ studentsCount }}
{{ subjectsCount }}
{{ teachersCount }}

---

这样，如果您的响应发生更改，您就不必更新模板和数据，而只需更新计算属性。

可能会有其他内容修改This.allCounts（）。然而，正如您希望在chrome console.log（）中显示放置日志行的行上的状态一样。不幸的是，事实并非如此。如果您在该方法之外的某个地方操作我们的对象，并在chrome开发控制台上单击+折叠。在你点击它的那一刻，它会变成什么样子……你是如何定义allCounts的？在数据中？电脑道具？你能分享一下它的定义吗：）return{allCounts:[]}这样我就定义了allCounts数组。我编辑了我的return方法，比如return{allCounts:{studentscont:[]，subjectscont:[]，teacherscont:[]，}，}。应用这个更改后，问题得到了解决，谢谢你的回复，teacherScont:[]，}，}它解决了在应用这个方法后我有一个类似于这个问题的问题，我如何定义这个方法作为你提供的“profitDetails[1].total”的返回方法，它不能解决我必须访问{{{profitDetails[0].total}{{profitDetails[1].total}{{profitDetails[2].total}{profittails的问题[3] .total}}。所以我必须在返回方法中定义它如何possible@ShasikaMadhushan你需要提出一个新问题来涵盖这个主题。这个解决方案是针对你的特定问题的，而计算属性也不能帮助你解决你的问题。