Nuxt如何实现随机农技提示加载页？现有代码无报错无输出求排查

存在的问题 #

• 父组件模板调用了未定义的city变量：你在模板里用{{city}}渲染内容，但data中仅定义了存储提示列表的randomcity数组，没有单独定义city变量存储选中的单条提示
• 随机逻辑错误：mounted钩子直接把存储提示列表的randomcity数组覆盖成了0-1000的随机浮点数，完全没有按索引从数组中取内容的逻辑
• 子组件props拼写错误：子组件里props的属性名多写了一个m，写成ranmdomcity，和父组件传递的randomcity属性名不一致，无法正常接收传值
• 子组件props定义不符合Vue规范：不能直接给props属性赋值字符串作为默认值，需要按标准格式声明类型

修正后代码 #

LoadingBar.vue #

<template lang="html">
  <div class="loading-page" v-if="loading">
    <h1 class="title">我们正在为你准备内容</h1>
    <img src="~/assets/media/photos/agronomy.png" class="image" />
    <p class="text">提示：{{city}} </p>
    <!-- 如果不需要子组件单独渲染也可以直接删掉下面这行 -->
    <randomtip :randomcity="city"/> 
  </div>
</template>

<script>
import randomtip from '~/components/randomtip.vue'
export default {
  layout: 'blank',
  components: {
    randomtip
  },
  data: () => ({
    loading: true,
    // 这里可以替换为你需要的农学相关提示内容
    randomcity: ["合理轮作可减少土传病害发生率", "苗期控水能促进作物根系下扎", "有机肥腐熟后施用才能避免烧苗"],
    city: '' // 新增存储选中单条提示的变量
  }),
  mounted: function(){
    // 按数组长度生成随机索引，取对应位置的提示内容
    const randomIndex = Math.floor(Math.random() * this.randomcity.length)
    this.city = this.randomcity[randomIndex]
  },
  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;
  text-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: {
    // 修正拼写错误，按Vue规范声明props类型
    randomcity: String
  }
};
</script>

内容的提问来源于stack exchange，提问作者maomecode