How make random tip picker in Nuxt?-CodePudding

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>

CodePudding user response：

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.