Question

我正在尝试使用vuetify创建一个n x 3矩阵，其中每个元素都是一张卡片。我需要呈现数据，该数据将作为array of Objects的道具传递。

我尝试使用文档中提供的卡片。当我静态传递它时，它正在渲染。我有些了解了代码的JS部分。我能够创建n x 3的矩阵，即2D array of objects。但是我无法正确使用它渲染

这是代码的样子。

CardRenderer.vue：

<template lang="html">
  <v-container grid-list-md >
    <v-layout>
      <v-flex xs12 md4>
        <v-card>
          <v-img
            class="white--text"
            height="200px"
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
          >
            <!-- <v-container> -->
              <v-layout>
                <v-flex xs12 align-end flexbox>
                  <span class="headline">Top 10 Australian beaches</span>
                </v-flex>
              </v-layout>
            <!-- </v-container> -->
          </v-img>
          <v-card-title>
            <div>
              <span class="grey--text">Number 10</span><br>
              <span>Whitehaven Beach</span><br>
              <span>Whitsunday Island, Whitsunday Islands</span>
            </div>
          </v-card-title>
          <v-card-actions>
            <v-btn flat color="orange">Share</v-btn>
            <v-btn flat color="orange">Explore</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>   
    </v-layout>
  </v-container>  
</template>

现在，它完全是静态的，我也没有喂道具。我正在寻找一个实际上可以渲染2D array of objects

的元素

这就是模板现在的样子！

这就是JS的样子

export default  {
    name: 'CardRenderer',
    props: {
      renderData: {
        type: Array,
        required: true,
        default: () => ([]),
      }      
    },
     data() {
      return {
        // rows: null
      }
    },
    mounted() {


    },

    methods: {

    },
    computed: {
      // Creates the `2D array of objects`
      // something like this

      /*
        - - -
        - - -
        - - -
      */
      rows() {
        const itemsPerRow = 3
        let rows = []
        // eslint-disable-next-line
        // console.log(this.renderData)
        let arr = this.renderData

        for (let i = 0; i < arr.length; i += itemsPerRow) {          
          rows.push(this.renderData.slice(i, i + itemsPerRow))
        }
        // this.rows = rows    
        return rows
      }

    }
  }
</script>

这是对象数组的样子：

 "apps": [
                {
                    "name": "Donut",                    
                    "link": "http://www.something.in/apps/donut",
                    "icon": "http://www.something.in/icon1",
                    "description": "some lorum epsum text",
                    "apps": []
                },
                {
                    "name": "tunod",
                    "link": "http://www.something.in/apps/tunod",
                    "icon": "http://www.something.in/icon2",
                    "description": "some lorum epsum text",
                    "apps": []     
                },
                {
                    "name": "finance",
                    "link": "finance",
                    "icon": "http://www.something.in/icon3",
                    "description": "some lorum epsum text",
                    "apps": [
                        {
                            "name": "reimbursement",
                            "link": "http://www.makeadiff.in/apps/tunod",
                            "icon": "http://www.something.in/icon2",
                            "description": "some lorum epsum text",
                            "title": "finance",
                            "apps": []

                        },  
                        {
                            "name": "Salesforce",
                            "link": "http://www.something.in/apps/tunod",
                            "icon": "http://www.something.in/icon2",
                            "description": "some lorum epsum text",
                            "title": "finance",
                            "apps": []
                        }
                    ]
                }        
            ]

如何使用2D array of Objects动态渲染卡片谢谢！

PS：过去三天来我一直坚持。请帮忙！

如何使用JSON

0 个答案: