Can't post different pictures in each box.

[Adrian-GP]

<vue-justified-layout :items="imagesRatio">
        <template slot="inner" slot-scope="slotProps">
          <img :src="imagesList" style="height:inherit; width:inherit;">
        </template>
      </vue-justified-layout>

<script>
  import VueJustifiedLayout from 'vue-justified-layout'
export default {
  name: 'Hero',
  data(){
    return {
      imagesRatio: [],
      imagesList: ['http://www.radiopanamericana.com/j/images/galerias/2018-04-18_0-1524069918.jpg']
    }
  },
  components: {VueJustifiedLayout},
  props: {
    msg: String
  },
  created() {
    this.random();
  },
  methods: {
    random() {
      for(let i =0; i<15;i++)
      {
          this.imagesRatio.push(Math.random()*2);
      }
      console.log(this.imagesRatio);
      return this.imagesRatio;
    }
  }
}
</script>

That's the code that I have, I'm able to create the random grid, however I want to have an array of URLs for me to use in the img tags, but it'll crash if I use it as an array, how to use an array to fill the imgs?

[Adrian-GP]

Found a workaround :)

[b4dnewz]

in order to have items as an array it must be an array of objects, see the example:

{
  name: 'App',
  data () {
    return {
      options: {
        targetRowHeight: 250
      },
      items: [{
        width: 250,
        height: 400,
        url: 'https://source.unsplash.com/featured/250x400?green,blue'
      }, {
        width: 300,
        height: 400,
        url: 'https://source.unsplash.com/featured/300x400?green,blue'
      }]
    }
  }
}

is that what you are looking for?

[Adrian-GP]

I do, but actually it won't show the pictures contained inside.

data () {
    return {
      options: {
      },
      imagesList: [{
        width: 854,
        height: 480,
        url: "https://static1.squarespace.com/static/55773285e4b09cccb26c8a1a/55773870e4b0ec07fd8223f1/5ab9482c88251b8dcd99675c/1522092090889/AKUMAL+03+2.jpg"
      }, {
        width: 854,
        height: 480,
        url: 'https://static1.squarespace.com/static/55773285e4b09cccb26c8a1a/55773870e4b0ec07fd8223f1/59655b9bb8a79be5247c71bc/1499814835390/CO+05+rendera.jpg'
      }, {
        width: 566,
        height: 600,
        url: "https://static1.squarespace.com/static/55773285e4b09cccb26c8a1a/55773870e4b0ec07fd8223f1/5ab94843758d46f8678eb615/1522092108900/AKUMAL+001+2.jpg"
      }, {
        width: 480,
        height: 600,
        url: 'https://static1.squarespace.com/static/55773285e4b09cccb26c8a1a/55773870e4b0ec07fd8223f1/5a8b43750d9297112d48e147/1519076227382/CC+CALLE.jpg'
      }]
    }
  },

<vue-justified-layout :items="imagesList" :options="options"></vue-justified-layout>

It'll just show the containers but the image isn't inside the tag.

[Adrian-GP]

<vue-justified-layout :items="imagesList" :options="options">
      <template slot="inner" slot-scope="{item}">
        <img :src="item.url" style="width:inherit; height:inherit">
      </template>
    </vue-justified-layout>

The above worked for me like a charm, so I'm all set, thanks for the module!

[b4dnewz]

As you discovered by yourself you must use a custom slot template. 👍

Thanks to you to using this module, if you have any feedback or features request your're welcome!