Tratando de entender la API de composición, pero aparentemente necesito un poco de ayuda. Cargando en todas mis "Cotizaciones" de un Firebase DB con este
import { ref } from 'vue' import { projectFirestore } from '../firebase/config' const getQuotes = () => { const quotes = ref([]) const error = ref(null) const load = async () => { try { const res = await projectFirestore.collection('quotes').get() quotes.value = res.docs.map(doc => { return { ...doc.data(), id: doc.id } }) } catch (err) { error.value = err.message console.log(error.value) } } return { quotes, error, load} } export default getQuotesQue funciona según lo previsto. Pero luego trato de crear un filtro para que solo se muestre aleatoriamente 1 cotización de esta manera:
<template> <section class="home"> <h1 style="color: pink">{{ randomQuote }}</h1> <Quote :quote="quote" v-for="quote in quotes" :key="quote.id" /> </section> </template> <script> import getQuotes from '@/composables/getQuotes' import Quote from '@/components/Quote.vue' import { computed } from '@vue/reactivity' export default { name: 'Home', components: { Quote }, setup() { const { quotes, error, load } = getQuotes() const randomQuote = computed(() => { return quotes.Math.floor(Math.random() * quotes.length) }) load() return { randomQuote, quotes, error } } } </script>En mi cabeza, esto debería funcionar... ¿alguien que pueda detectar el error y avisarme?
Esta sintaxis significa quotes.Math.floor(Math.random() * quotes.length) que una propiedad llamada Math en la matriz de quotes , mientras que se supone que se debe acceder a la variable global Math . Dado que una matriz no tiene esa propiedad, esto dará como resultado un error. Si la intención es especificar un índice de matriz dinámica, no puede diferir de acceder a una propiedad.
Para acceder a un índice, se debe usar la notación de corchetes, probablemente:
quotes[Math.floor(Math.random() * quotes.length)]