[Vuejs]-How to pass data using props in v-for?

by

0👍

✅

If you wished to used props, instead of initializing under data, add props after that

props: {
  grades: Array
  // or, with a default:
  grades: {
    type: Array,
    default: () => [{ ...}, { ...}]
  }
}

Reference: from LinusBorg https://forum.vuejs.org/t/define-array-of-objects-for-component-props/43618

0👍

Well based on the data you created, that’s all you’re going to get. If you add another object into your lists array, like the one below, you should have the cards you want.

lists: [
   { idx: 1,
      CardTitle: "CardTitle",
      grades: [
         { name: "name1",
           group: [
              { itemname: "itemname1-1",
                timefinish: "1111",
              },
              { itemname: "itemname1-2",
                timefinish: "2222",
              },
           ],
         },
         { name: "name2",
            group: [
               { itemname: "itemname2-1",
                 timefinish: "3333",},
               { itemname: "itemname2-2",
                 timefinish: "4444",},
               { itemname: "itemname2-3",
                 timefinish: "5555",},
            ],
         },
      ],
   }
   { idx: 2,
     CardTitle: "CardTitle2 ,
     grades: [
        { name: "name3”,
          group: [
             { itemname: "itemname3-1”,
               timefinish: "1111",},
             { itemname: "itemname3-2”,
               timefinish: "2222",},
          ],
        },
        { name: "name4”,
          group: [
             { itemname: "itemname4-1”,
               timefinish: "3333",},
             { itemname: "itemname4-2”,
               timefinish: "4444",},
             { itemname: "itemname4-3”,
               timefinish: "5555",},
          ],
        },
     ],
   }
]

Leave a comment