Vue.js 变量数据的奇怪行为

我有以下代码

    <div class="gameContainer">
      <span
        v-for="(tile, index) in shuffledTiles"
        :key="`${tile}_${index}`"
        :data-key="`${tile}_${index}`"
        :class="['tile-data px-2', tile, getClass(tile + index, tile)]"
        @click="clickHandler(tile + index, tile)"
      >
        <img :src="`icons/${tile}.svg`" :alt="tile" />
      </span>
    </div>

当呈现上述代码时，img src和alt值完全不同。我在

shuffledTiles

中尝试了console.log，并在浏览器控制台中获得了值。一个来自Nuxt SSR，一个来自我的代码。两者的顺序完全不同

如果查看dom树，数据键不同，图像src不同

你可以在这里看到代码

我不知道发生了什么事。任何暗示都会有帮助。这是我的第一个项目

---

这是因为您正在洗牌两次。一次在SSR期间，一次在客户端

只做一次。一个简单的解决方案是，通过将游戏组件包装到组件中，只在客户端渲染游戏组件

<client-only>
  <game>
</client-only>

<game :tiles="tiles" />

然后，将其作为道具传递给游戏组件

<client-only>
  <game>
</client-only>

<game :tiles="tiles" />

循环使用

分幅

而不是

随机分幅

<span
  v-for="(tile, index) in tiles"
  :key="`${tile}_${index}`"
  :data-key="`${tile}_${index}`"
  :class="['tile-data px-2', tile, getClass(tile + index, tile)]"
  @click="clickHandler(tile + index, tile)"
>
  <img :src="`icons/${tile}.svg`" :alt="tile" />
</span>

之所以这样做，是因为当页面加载时，

asyncData

仅在服务器端执行。从asyncData返回的任何内容都将合并到页面组件的数据中。并传递给浏览器。因此，在浏览器上再次构建应用程序时，它使用相同的数据，而不是构建新的数据

---

PS.看起来是一个有趣的游戏。祝你好运完成它。：）

当您说它们“不同”时，您的意思是属性彼此不一致，还是只是服务器端和客户端的值不同？

shuffledTiles

的代码是使用

Math.random

随机洗牌的，因此每次调用时它都会给出不同的顺序。@skille请查看屏幕截图。img src应该是apple，但它的番茄色。@skille

shuffledTiles

肯定会给出不同的结果，但只有在刷新时才会给出。但一旦页面可见，它就已经搞乱了-|对于将由服务器渲染然后由客户端重新水化的结果，不能使用“随机”。您的代码应该在客户机和服务器上产生相同的结果，或者只在客户机上执行，例如内部安装hook@Aldarund非常感谢。这就解决了我的问题。谢谢你的详细回答：-）我使用了

。谢谢你的鼓励。尽管这是一个基本的游戏，但它现在运行良好：-）