Question

我遇到这个问题，这是我第一次看到的。我有一个计算所得的属性：

numOfStudentsPerSubject() {
    let res = []

    for (let subject of this.subjects) {
        let key = subject.superSubject.trim()
        res[key] = 0
        for (let student of this.students) {
            let studentSubject = student.subjects.find((x) => x.superSubjectName === key)
            if (studentSubject) res[key]++
        }
    }
    console.log(res)
    return res
}

登录到屏幕的结果如下：

[Letters Recognition: 8, Listening - First Letter: 8, Listening - Letters: 0, Reading Comprehension - Sentences: 8, Reading Comprehension - Story: 8, …]

但是当我尝试将数据添加到屏幕上像：<p>{{numOfStudentsPerSubject}}</p>时，无论我做什么，它都会显示一个空数组[]。任何人都不知道是什么原因会导致这种问题？

Answer 1

首先，您应该为res使用一个对象，而不是一个数组。数组是通过数字而不是键索引的，而对象是键值对的集合。

第二，您要返回该数组，但Vue模板需要一个字符串，因此只在该数组上调用toString即可，因为您没有任何有效的索引要枚举，所以默认为[]。

在模板中使用对象时，请切换为使用对象并对其进行字符串化（或使用其他方法将其转换为字符串）。

const obj = {
  'example1': 4,
  'example2': 7
}

console.log(obj.toString())

console.log(JSON.stringify(obj))

当值存在时，vue中的计算值不会加载到模板

1 个答案: