Question

我使用了两个vue v-for来制作我的桌卡

但是我需要多张相似的卡片

所以我想用道具画出来。

如何修改NewLearning.vue的代码？

这是我的代码

NewLearning.vue

这是我想要的代码（NewLearning.vue需要使用道具）

NewLearningProcess.vue

<div v-for="list in lists" :key="list.name">
  <NewLearning :data="list"></NewLearning>
</div>

<script>
import NewLearning from "../components/Learning/NewLearning";
export default {
  components: {
    NewLearning,
  },
  data() {
    return {
      title: "title",
      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",},],},],}],};},};
</script>

我的代码出现在前端

我想要它（下面会有不同的数据）

Answer 1

如果您希望使用props，而不是在data下进行初始化，请在其后添加props

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

参考：来自LinusBorg https://forum.vuejs.org/t/define-array-of-objects-for-component-props/43618

Answer 2

根据您创建的数据，这就是您将要获得的全部。如果将另一个对象（如下面的对象）添加到lists数组中，则应具有所需的卡片。

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

如何在v-for中使用道具传递数据？

2 个答案: