im trying to make a loading page that when run wil appear a random tip about agronomy between 3 sentences, everything looks like other codes i search in internet but nothing happen when i call the object, no errors but no results too.
My original idea was a string with the items of tips and a math.random for select for id one of these objects, but after lot of trying unsuccesfull i get this 2 components thats is the more near i could get
Can someone tell me where is the problem?
i use the {{city}} for the tip because was same of another code.
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>
Instead of replacing the value of randomcity with your Math.random() statement, consider using a computed getter method to create the randomness:
Remove this:
mounted: function(){
this.randomcity = Math.random() * 1000
},
Rename this:
randomcity: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"],
// ->
cities: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"],
Now create your computed property:
computed: {
randomcity () {
return this.cities[Math.floor(Math.random()*this.cities.length)]
}
}
Now you will get a random city from your array list.