Having trouble using the component

[James-Hudson3010]

I have the component declared by doing the following:

        <v-layout class="display">

          <VirtualGrid :items="mediaItems"
                       :debug="true">

          </VirtualGrid>
        </v-layout>

the display class is defined as:

.album-display {
  overflow: scroll;
  width: 100%;
  height: 100%;
  align-items: stretch;
  align-content: stretch;
  background-color: blue;
}

mediaItems is a computed property and looks like:

    mediaItems()
    {
      let mediaItems = this.items.map( ( item, index ) =>
      {
        return {
          id: `${index}`,
          height: 400,
          width: 400,
          columnSpan: 1,
          renderComponent: MediaItem
        };
      });

      return mediaItems;
    },

this.items is defined to be:

items: [ "[0] - onodit", "[1] - Is", "[2] - whilel", "[3] - Coxise", "[4] - Prods", "[5] - mandmi", "[6] - eciand", "[7] - FIRS", "[8] - ho", "[9] - chabli", "[10] - 1.7%", "[11] - atic", "[12] - oroder", "[13] - he", "[14] - aremy", "[15] - Lost,", "[16] - are", "[17] - sion", "[18] - and", "[19] - Centor", "[20] - hamate", "[21] - e.", "[22] - of", "[23] - abok", "[24] - an", "[25] - used", "[26] - fortio", "[27] - wity", "[28] - Theent", "[29] - inal", "[30] - blonti", "[31] - ionad", "[32] - aned", "[33] - Prics", "[34] - In", "[35] - inal", "[36] - mend", "[37] - moract", "[38] - re", "[39] - ing", "[40] - ge", "[41] - a", "[42] - par", "[43] - frobe", "[44] - hough", "[45] - com", "[46] - eummun", "[47] - ats", "[48] - deritu", "[49] - mic", "[50] - he", "[51] - the", "[52] - dom", "[53] - to", "[54] - comess", "[55] - in", "[56] - (2)", "[57] - the", "[58] - ch", "[59] - this" ],

The MediaItem Component looks like:

<template>

  <div class="item">
    Hello
    {{ item }}
  </div>

</template>

<script>

export default
{
  name: "MediaItem",

  props:
  {
    item: {
      required: true
    },
  },
};
</script>

<style scoped>

.item {
  width: 400px;
  height: 400px;

  background-color: yellowgreen;

  overflow: hidden;
}
</style>

There are two problems:

1. It only renders the first eight items
2. It is not filling the space well...I would expect multiple columns

i am sure I am missing something easy, but I am not sure what that is yet.

It looks like:

[Mikescops]

Hello @James-Hudson3010 ,

Sorry for the late reply, It's difficult to debug things without a live example. But reading your code i would point an issue with the CSS.

In order to get the {{ item }} element within you component you have to use the injected parameter. Check the documentation about this and also the code in the example folder!

If you have a live demo, it would be easier to help, thanks :smile:

[Mikescops]

Closing this thread as no further response from OP.