Nuxt：每次重新加载页面时随机排列图像以在轮播中显示不同的徽标

Question

我有一个徽标轮播，我想在每次重新加载页面时随机播放该数组中的所有图像，以便轮播在每次重新加载时以不同的顺序显示图像，此外我的布局只允许显示 10 张图像同时

显然一切正常。我正在洗牌原始图像数组，然后创建一个计算值来执行 for 循环以显示新的洗牌图像，问题是即使这在 PRE 中工作正常在 PRO 中也只是工作，如果我导航页面然后回到有轮播的地方，如果我只是重新加载页面，它会继续显示相同的图像。

我还注意到，出于某种原因，当我有一个特定的计算值时，该应用程序也会对原始数组进行混洗，属性以存储新的排序数组。

<template>
  <div class="site-section--partners__images" role="list">
    <div
      v-for="(logo, index) in SelectedLogos"
      :key="index"
      class="site-section--partners__logo"
      role="listitem"
    >
      <a :href="logo.url" target="_blank">
        <img
          class="site-section--partners__image"
          :src="logo.image"
          :alt="logo.alt"
          :title="logo.alt"
        />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      partnersLogos: [
        {
          id: 1,
          image: '/images/partners/wildz.svg',
          url: 'http://www.xcc.com',
          alt: 'Wildz',
        },
        {
          id: 2,
          image: '/images/partners/caxino.svg',
          url: 'http://www.xcc.com',
          alt: 'Caxino',
        },
        {
          id: 3,
          image: '/images/partners/wheelz.svg',
          url: 'https://www.xcc.com/en/',
          alt: 'Wheelz',
        },
        {
          id: 4,
          image: '/images/partners/koi.svg',
          url: 'https://www.xcc.com/',
          alt: 'Koi',
        },
        {
          id: 5,
          image: '/images/partners/maximbet-logo.svg',
          url: 'https://xc.com/',
          alt: 'Maximbet',
        },
        {
          id: 6,
          image: '/images/partners/superseven.svg',
          url: 'http://www.xcc.com/',
          alt: 'SuperSeven',
        },
        {
          id: 7,
          image: '/images/partners/carousel-group.svg',
          url: 'https://www.xcc.net/',
          alt: 'Carousel Group',
        },
        {
          id: 8,
          image: '/images/partners/pocketplay.svg',
          url: 'https://xcc.com/',
          alt: 'Pocket Play',
        },
        {
          id: 9,
          image: '/images/partners/gig.svg',
          url: 'https://www.xcc.com/',
          alt: 'Gig',
        },
        {
          id: 10,
          image: '/images/partners/bollybet.svg',
          url: 'https://www.xcc.com/',
          alt: 'Bollybet',
        },
        {
          id: 11,
          image: '/images/partners/boomBangVip.svg',
          url: 'https://www.xcc.vip/',
          alt: 'Boom Bang VIP',
        },
        {
          id: 12,
          image: '/images/partners/casibee.svg',
          url: 'https://www.xcc.com/',
          alt: 'CasiBee',
        },
        {
          id: 13,
          image: '/images/partners/jackpot.svg',
          url: 'http://www.xcc.com',
          alt: 'Jackpot Guru',
        },
      ],
      ShuffledLogos: null,
    }
  },
  computed: {
    SelectedLogos() {
      return this.ShuffledLogos.slice(0, 10)
    },
  },
  created() {
    this.ShuffledLogos = this.selectRandomLogo(this.partnersLogos)
  },
  methods: {
    selectRandomLogo(items) {
      for (let i = items.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[items[i], items[j]] = [items[j], items[i]]
      }
      return items
    },
  },
}
</script>

如您所见，我有一种方法可以随机播放原始数组 (partnersLogos) 中的图像，然后将它们存储在 ShuffledLogos 数组中，然后我使用该 ShuffleLogos 数组创建一个计算值并循环显示它每次我刷新页面时图像都会随机播放，但这不起作用。

Answer 1

@ErsinDemirtas 在评论中的回答是正确的，所以我将在这里复制粘贴他的评论，因为他值得所有的赞扬：

这可能是因为你的构建。看起来计算的属性只执行一次并部署为静态。所以你应该检查你的产品是否启用了 SSR。这意味着计算的数据只计算一次，如果您刷新，您将始终得到相同的结果。您想要的是运行仅在客户端随机播放。就我个人而言，我会将此组件放入 client-only 这里有更多相关信息。 nuxtjs.org/docs/features/nuxt-components/…

Nuxt：每次重新加载页面时随机排列图像以在轮播中显示不同的徽标

Nuxt: Shuffle Array of Images everytime page is reload to Show different Logos in Carousel

javascript

vue.js

nuxt.js