Массивы и вложенные массивы в 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")],



    }

Я хочу использовать neted 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
  }
]