Nuxt.JS 不会按照我的需要渲染块

Question

我正在构建 nuxt.js SSR Web 应用程序，但遇到了奇怪的问题。

<div class="container" @mouseenter="hovered = true" @mouseleave="hovered = false">
  <transition name="fade">
    <div class="class1" v-show="!hovered && isDesktop">blank_1</div>
  </transition>
  <transition name='scale'>
    <div class="class2" v-show="hovered || !isDesktop">blank_2</div>
   </transition>
</div>

<script>
export default {
  data() {
    return {
      hovered: false
    }
  },
  computed: {
    isDesktop() {
      if(process.client) {             
        window.screen.width > 1024 ? return true : return false
      }
    }
  }
}
</script>

<style>
.class1 {
  height: 100px;
  width: 100px;
  background-color: red;
}
.class2 {
  height: 100px;
  width: 100px;
  background-color: blue;
}
</style>

我将通过几个步骤来解释这一点。

1. 让我解释一下它应该如何工作：
   • 默认情况下，class="class1" 的 Div 应显示在桌面上，并在您悬停容器时消失。在移动设备上，它应该每次都隐藏起来。
   • 具有 class="class2" 的 Div 应在桌面上隐藏并在您悬停容器时出现。在移动设备上，它应该每次都显示。
2. 现在让我解释一下它是如何工作的：
   1. 桌面：
      • 带有 class="class1" 的 Div 直到我将容器悬停一次后才会显示，然后正常工作
      • 具有 class="class2" 的 Div 可以正常工作。
   2. 手机：
      • 具有 class="class1" 的 Div 可以正常工作。
      • 具有 class="class2" 的 Div 可以正常工作。
3. 我是如何解决的：
   • 经过几个小时的尝试，我才意识到我可以将第一个 div 上的 v-show 重写为 v-show="!hovered" 并在移动屏幕上设置媒体查询 display:none;。所以我修复了我唯一的桌面问题。

但是为什么当我有v-show="!hovered && isDesktop" 时它会这样工作呢？ 我猜想 Nuxt.JS 上的第一次加载是在服务器上进行的，所以 isDesktop 返回为 undefined 所以v-show="!hovered && isDesktop" 变成了v-show="!false && undefined"。但是为什么第二个 div 的 v-show 指令：v-show="hovered || !isDesktop" 如果应该变成 v-show="false || !undefined" 可以正常工作，但我仍然得到这个 div 隐藏在桌面和在移动设备上显示 .

附：这是我的第一个 StackOverflow 问题，很抱歉，如果我的代码样式不好，我不明白它是如何工作的。谢谢你的回答。

Answer 1

奇怪的行为可能来自这一行

window.screen.width > 1024 ? return true : return false

应该是什么时候

return window.screen.width > 1024 ? true : false

语法不正确。当我尝试时，Nuxt 甚至不会编译它。我想知道为什么您的 Nuxt 服务器可以使用它。