如何在 Nuxt 中制作随机提示选择器？

Question

我正在尝试制作一个加载页面，当运行会在 3 个句子之间随机出现一个关于农学的提示时，一切看起来都像我在互联网上搜索的其他代码，但是当我调用该对象时没有任何反应，没有错误但也没有结果。

我最初的想法是一个包含提示项的字符串和一个 math.random for select for id 这些对象之一，但经过多次尝试不成功后，我得到了这 2 个组件，这就是离我更近

谁能告诉我问题出在哪里？

我使用 {{city}} 作为提示，因为与另一个代码相同。

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>

Answer 1

与其将 randomcity 的值替换为您的 Math.random() 语句，不如考虑使用计算的 getter 方法来创建随机性：

删除这个：

mounted: function(){
  this.randomcity = Math.random() * 1000
 },

重命名：

randomcity: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"],
// -> 
cities: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"],

现在创建您的计算属性:

computed: {
  randomcity () {
    return this.cities[Math.floor(Math.random()*this.cities.length)]
  }
}

现在您将从数组列表中随机获得一个城市。

如何在 Nuxt 中制作随机提示选择器？

How make random tip picker in Nuxt?

javascript

vue.js

nuxt.js

buefy