Vue.JS中的数组和嵌套数组

Question

在组件中我有这些数组：

export default {
  data() {

    return {

      userGrades: [
        [course= "Mathematics"], [grade = 18 ],
        [course= "Physics"], [grade = 15 ],
      ],


      userSubscriptions: [
        [option= "Swiming Pool"], [price = 60 ],
        [option= "Fiteness Club"], [price = 30 ],
      ],


      userContact: [(phone = "00000000"), (fax = "11111111")],



    }

我想使用嵌套的v-for指令来列出它们。使用单个数组，它是直接的，但是当我使用嵌套的v-for时，代码会编译，但不会呈现任何内容

Answer 1

以下是您应该声明的数组。

userGrades: [
{
    course: 'Mathematics',
    grade: 18
},
{
    course: 'Physics',
    grade: 15
}],
userSubscriptions: [
{
    option: "Swiming Pool",
    price: 60
},
{
    option: "Fiteness Club",
    price: 30
}],
userContact: [
{
    phone: "00000000"
},
{
    fax: "11111111"
}]

您可以将它们迭代为=>

<div v-for="item in userGrades">
{{item.course}}=>{{item.grade}}
</div>

所有其他数组对象也是如此。

Answer 2

Javascript没有嵌套关联数组的想法。您必须使用对象表示法：

userGrades: [
  {
      course: 'Mathematics',
      grade: 18
  }
]