How to get random element in Vue.js

Question

I have 3 hero images and their content and I want to display them randomly when user refreshes the page!

Basically I am trying to display random div using Jquery on loading page, but issue is that the size of hero image is large and by using Jquery, all these 3 images start loading in DOM which affects the speed of page.

Is there any solution for this in Vue.js for loading that one specific div at a time, not all 3 divs when user refreshes the page!?

<div class="slider-item"> <img src="../../../static/img/slides/slide1.png" alt="Hello"> 
       <div class="carousel-caption"> 
           <h2>Lipsum Heading</h2> 
               <h4>Lipsum dummy content body test dummy goes here.</h4> 
       </div> 
   </div>

jQuery Code:

mounted()
{
 var random = Math.floor(Math.random() * $('.slider-item').length);
 $('.slider-item').eq(random).show();
},

What are those images? Are they data URLs or just image links? And you are displaying only one image, not all three of them right? — kevguy
– kevguy, Commented Aug 18, 2017 at 9:23
@kevlai22 Yes, Want to show just one in DOM but randomly, this is HTML. <div class="slider-item"> <img src="../../../static/img/slides/slide1.png" alt="Hello"> <div class="carousel-caption"> <h2>Lipsum Heading</h2> <h4>Lipsum dummy content body test dummy goes here.</h4> </div> </div> — Figar Ali
– Figar Ali, Commented Aug 18, 2017 at 9:29

kevguy · Accepted Answer · 2017-08-18 09:30:16Z

9

Everything is pretty straight forward. Just randomize the link you've chosen in Vue.

const app = new Vue({
  el: '#app',
  data: {
    images: [
      'http://via.placeholder.com/350x150',
      'http://via.placeholder.com/200x140',
      'http://via.placeholder.com/200x100'
    ],
    selectedImage: ''
  },
  created () {
    const idx = Math.floor(Math.random() * this.images.length);
    this.selectedImage = this.images[idx]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <img v-bind:src="selectedImage" />
</div>

answered Aug 18, 2017 at 9:30

kevguy

4,4381 gold badge27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Callum Flack Over a year ago

Small thing about this: data needs to be a function. That is, it should be: data() { return {} }

kevguy Over a year ago

In components, yes, in the code above, it's not necessary.

Callum Flack Over a year ago

Good pt, missed that @kevguy

Vamsi Krishna · Accepted Answer · 2017-08-18 09:35:09Z

You can do it like this:

html

<div id="hero-bg">
    <img :src="currentBgPath">
</div>

script

new Vue({
    el: '#hero-bg',
    data:{
        heroBgPaths: [
            '../path/to/img1',
            '../path/to/img2',
            '../path/to/img3'
        ],
        currentBgPath: null
    },
    created(){

        var random = Math.floor(Math.random() * this.heroBgPaths.length);
        this.currentBgPath = this.heroBgPaths[random];
    }
})

initialize the paths to your images as an array in your data property
initialize a data property currentBgPath and set to to null
in created life cycle hook get a random number within the number of items in your image paths array using
```
var random = Math.floor(Math.random() * this.heroBgPaths.length);
```
set the value of currentBgPath using this.currentBgPath = this.heroBgPaths[random]; and bind the src attribite of the img element to currentBgPath

Collectives™ on Stack Overflow

How to get random element in Vue.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related