Nuxt.JS根本不需要渲染块

Question

我正在构建nuxt.js SSR网络应用程序，我面临着奇怪的问题。

<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，并在悬停容器时显示消失。 在移动设备上，它应该每次都隐藏起来。
   • Div = class =“class2”的Div应隐藏在桌面上，并在您悬停容器时显示。 在移动设备上，它应该每次都显示出来。
2. 让我解释它现在是如何工作的：
   1. 桌面：
      • 没有显示 class =“class1”的div， 直到我将容器悬停一次，然后按预期工作
      • 带class =“class2”的div可以正常工作。
   2. 移动：
      • 带class =“class1”的div可以正常工作。
      • 带class =“class2”的div可以正常工作。
3. 我是如何解决它的：
   • 经过几个小时的尝试，我才意识到我可以将第一个div上的v-show="!hovered"重写为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 隐藏在桌面上并显示在手机上 。

PS这是我的第一个StackOverflow问题，对不起，如果我的代码很糟糕，我不知道它是如何工作的。 谢谢你的回答。

Answer 1

奇怪的行为可能来自这条线

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

什么时候应该

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

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