代码之家 › 专栏 › 技术社区 › tkon99

仅从服务器上的nuxt.js中的数组中选择随机项

nuxt nuxt.js vue-component vue.js

tkon99 · 技术社区 · 5 年前

我目前使用以下 component.vue 但是,这会使其计算两次(渲染时一次 服务器端 ,一次上 客户机 )因为它是随机的,用户会看到城市闪光一秒钟(然后切换到另一个)。

防止这种情况的最有效方法是什么?

export default {
        data(){
            return {
                cities: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"],
                city: ''
            }
        },
        created(){
            this.city = cities[Math.floor(Math.random()*cities.length)];
        }
    }

1 回复 | 直到 5 年前

tkon99 5 年前

在 page.vue 我用过 异步数据 设置数据 服务器端 渲染过程中,如:

export default {
    components: {
         'component'
    },
    data(){
         return {
             city: ''
         }
    },
    asyncData (context){
         let cities = ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"];
         const city = cities[Math.floor(Math.random()*cities.length)];
         return {
              city: city
         }
    }
}

现在我们有了变量 city 对于随机城市,使用道具或 this.$parent.city 在组件中。

推荐文章

Goose · 如何更新Vue中的插槽。JS公司

6 年前

Scap · 访问其他组件中的vue组件数据时出现问题

6 年前

Andy · 从列表中删除vue组件始终删除列表中的最后一个元素

6 年前

Harshal Patil · 如何创建Vue。js插槽编程?

6 年前

kindisch · 无法解析动态导入的vue组件

6 年前

user1436631 · vueJS-当本地副本更新时,属性正在发生变化

6 年前

Willing Master · 如何配置选项以删除vue-tables-2中分页的第一个和最后一个按钮

6 年前

kshep92 · 将布尔属性传递给Vue组件的速记

6 年前

Bitwise · 将动态数据传递到路由器链路。

6 年前

user3699711 · 如何将数组中的元素添加到div元素中,其中id等于vue中的数组元素dealState号。js公司

6 年前