Получить случайный идентификатор объекта в Vue-3

Мне нужно создать вычисляемую функцию в Vue 3, которая случайным образом выбирает идентификатор и показывает все его содержимое, вероятно, с v-for.

Вот Объект;

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' }]}]

Я предполагаю, что мне нужно будет использовать .sort, но не знаю, с чего начать! Был бы очень признателен за помощь!

Я знаю, что в обычном javascript есть множество ответов на этот вопрос. Однако я хотел бы знать, как это делается в вычисляемой функции vue!

javascript vue.js vuejs3

04.04.2022 23:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это работает?

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.info(getObject);

04.04.2022 23:15

Ответ принят как подходящий

Чтобы выбрать случайный элемент из ваших данных, вы можете сделать что-то вроде этого:

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

Если вы хотите, вы можете поместить всю свою логику в вычисляемое свойство, но имейте в виду, что оно не будет предоставлять другое значение, пока не изменится data (рассматриваемое как свойство компонента).

<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>

Чтобы обновлять случайный элемент каждый раз, когда нажимается кнопка, вы можете сделать что-то вроде этого:

<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>

Как я могу получить другой объект при нажатии кнопки?

— 04.04.2022 23:24

Вы должны сделать его методом (а не вычисляемым) и вызывать его каждый раз, когда вы нажимаете кнопку. Случайный элемент можно сохранить в свойство данных.

— 04.04.2022 23:26

Извините, потому что randomElement сначала был определен как null, а шаблон пытался прочитать свойства null. Теперь это должно работать.

— 04.04.2022 23:46

04.04.2022 23:19

Вы можете использовать библиотеку под названием toxic, малоизвестную, но у нее есть встроенная функция для этого.

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

теперь вы можете использовать:

var array = [1, 2, 3];

var random = array.random();

или

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

Привет спасибо. Я предпочитаю не использовать никакую библиотеку!

— 04.04.2022 23:25

В порядке! Это нормально.

— 05.04.2022 00:39

Но поможет ли что-нибудь подобное? | function getRandomFromList(array){ return array[Math.floor((Math.random()*array.length))]; }

— 05.04.2022 00:40

04.04.2022 23:23

Другие вопросы по теме

Как отключить наложение eslint в последней версии Vue?

Приложение Nodejs и Vue все в файле сервера

Как я могу импортировать стили для ПК или мобильных устройств?

Модульный тест JEST для Vue вычисляется

Как получить доступ к внедренному репозиторию из метода компонента

Vue 3 (CLI) импортирует глобальные стили больше, чем нужно

Передача event.target.getAttribute() данным в Vue

Почему мой лениво загружаемый компонент Vue JS Nuxt связан с app.js, а не загружается отдельно?

Продолжайте получать «Неопределенный индекс», пока индекс есть. Отлично работает в онлайн-редакторе, но не в проекте?

Как я могу сделать форму редактируемой, когда я нажимаю кнопку редактирования?

Получить случайный идентификатор объекта в Vue-3

Ответы 3

Другие вопросы по теме

Похожие вопросы