Estoy tratando de hacer una página de carga que cuando se ejecute aparecerá un consejo aleatorio sobre agronomía entre 3 oraciones, todo se parece a otros códigos que busco en Internet pero no sucede nada cuando llamo al objeto, no hay errores pero tampoco resultados.
Mi idea original era una cadena con los elementos de consejos y una matemática aleatoria para seleccionar para la identificación de uno de estos objetos, pero después de muchos intentos sin éxito, obtuve estos 2 componentes, eso es lo más cerca que pude estar.
¿Alguien puede decirme dónde está el problema?
utilizo {{city}} para la sugerencia porque era igual a otro código.
LoadingBar.vue
<template lang="html"> <div class="loading-page" v-if="loading"> <h1 class="title">Estamos preparando o terreno para você</h1> <img src="~/assets/media/photos/agronomy.png" /> <p class="text">Dica: {{city}} </p> <randomtip :randomcity="city"/> </div> </template> <script> import randomtip from '~/components/randomtip.vue' export default { layout: 'blank', components: { randomtip }, data: () => ({ loading: true, randomcity: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"], }), mounted: function(){ this.randomcity = Math.random() * 1000 }, methods: { start () { this.loading = true }, finish () { this.loading = false }, } } </script> <style scoped> .agronomy { width: 256px; height: 256px; } .title { font-family: Poppins; font-style: normal; font-weight: 500; font-size: 36px; line-height: 54px; align-items: center; text-align: center; letter-spacing: 0.05em; color: #FFFFFF; } .text { Font-family: 'Poppins'; Font-style: Medium; Font-size: 18px; Line-height: 27px; Line-height: 100%; Align: Center; color: #FFFFFF; Vertical-align: Center; Letter-spacing: 5%; } .loading-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #3498DB; text-align: center; padding-top: 200px; font-size: 30px; font-family: sans-serif; } .image { margin-bottom: 10%; } </style>randomtip.vue
<template> <div>{{randomcity}}</div> </template> <script> export default { name: "randomtip", props: { ranmdomcity: "randomcity" } }; </script>En lugar de reemplazar el valor de randomcity con su declaración Math.random() , considere usar un método getter calculado para crear la aleatoriedad:
Elimina esto:
mounted: function(){ this.randomcity = Math.random() * 1000 },Renombrar esto:
randomcity: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"], // -> cities: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"],Ahora crea tu propiedad calculada:
computed: { randomcity () { return this.cities[Math.floor(Math.random()*this.cities.length)] } }Ahora obtendrá una ciudad aleatoria de su lista de matriz.