'Get a random item using computed property in Vue 3 [duplicate]

I need to make a computed function in Vue 3 that randomly selects an id, and shows all of its contents.

This is the object:

export const data = [
{id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
{id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}]

I suppose that I will need to use .sort, but I'm not sure where to start. I would really appreciate some help!

I am well aware that there are numerous answers to this in JavaScript. However, I would like to know how this is done in a Vue computed property!

vue.js

Solution 1:^[1]

To select a random element from your data you can do something like this:

function getRandomElement(data) {
  const index = Math.floor(Math.random() * (data.length))
  const randomElement = data[index];
  return randomElement;
}

If you want, you can put all your logic into a computed property, but be aware that it will not provide a different value unless data (considered as a component property) changes.

<script>
export default {
  data() {
    return {
      data: [...]
    }
  },
  computed: {
    randomElement() {
      const index = Math.floor(Math.random() * (this.data.length))
      const randomElement = this.data[index];
      return randomElement;
    }
  }
}
</script>
<template>
  <div>
    <p>Album: {{randomElement.albumname}}</p>
    <p>Artist: {{randomElement. artist}}</p>
    ...
    <ul>
      <li v-for="(song,index) in randomElement.songs" :key="index">
        {{song.song}}
      </li>
    </ul>
  </div>
</template>

To update the random element every time a button is pressed, you can do something like this:

<script>
export default {
  data() {
    return {
      data: [
        {id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
        {id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
        {id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
        {id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}
      ],
      randomElement: null
    }
  },
  methods: {
    updateRandomElement() {
      const index = Math.floor(Math.random() * (this.data.length))
      this.randomElement = this.data[index];
    }
  }
}
</script>
<template>
  <div>
    <button @click="updateRandomElement">Update random element</button>
    <div v-if="randomElement">
      <p>Album: {{randomElement.albumname}}</p>
      <p>Artist: {{randomElement. artist}}</p>
      <ul>
        <li v-for="(song,index) in randomElement.songs" :key="index">
          {{song.song}}
        </li>
      </ul>
    </div>
  </div>
</template>

Solution 2:^[2]

Is that works?

const data = [
{id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
{id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}]

const getRandom = Math.floor(Math.random() * data.length);
const getObject = data.find( el => getRandom == el.id);
console.log(getObject);

Solution 3:^[3]

You can use a library called toxic, not well known but it has a built in feature for using this.

<script src="https://toxic-js.techdeck.repl.co/toxic.js"></script>

now you can use:

var array = [1, 2, 3];

var random = array.random();

var random = [1, 2, 3].random();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Evren
Solution 3	Brycen Weeks

'Get a random item using computed property in Vue 3 [duplicate]

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]