Arrays and nested Arrays in Vue.JS

Question

In a component I have these arrays :

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")],



    }

I want to use neted v-for directives to list them. With a single array, it's straight forward, but when I use nested v-for, the code compiles, but nothing is rendered

What are those arrays, what exactly is in there? This shouldn't compile. — Eindbaas, Feb 14 '19 at 15:30
It compiles, but not at all to what you expect it to; what you've defined is `{userGrades: [["Mathematics"], [18], ["Physics"], [15]], userSubscriptions: [["Swiming Pool"], [60], ["Fiteness Club"], [30]], userContact: ["00000000", "11111111"]} `, because all of those `foo = bar` chunks just end up returning `bar`. — Daniel Beck, Feb 14 '19 at 15:36

score 1 · Answer 1 · edited Feb 14 '19 at 15:55

Here are the arrays you should declare.

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"
}]

You can iterate through them as =>

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

Same for all other array objects.

score 0 · Answer 2 · answered Feb 14 '19 at 15:31

0

Javascript does not have the idea of nested associative arrays. You must use object notation:

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

answered Feb 14 '19 at 15:31

Ohgodwhy

49,779
11
80
110

Arrays and nested Arrays in Vue.JS

2 Answers2