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>

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

让我解释一下它应该如何运作：
- Div with class =＆＃34; class1＆＃34;默认情况下应在桌面上显示，并在悬停容器时消失。在移动设备上，它应该每次都隐藏起来。
- Div with class =＆＃34; class2＆＃34;应该隐藏在桌面上并在您悬停容器时显示。在移动设备上，它应该每次都显示出来。
让我解释它现在如何运作：
1. 桌面：
  - Div with class =＆＃34; class1＆＃34; 未显示，直到我将容器悬停一次，然后按原样运行
  - Div with class =＆＃34; class2＆＃34;按原样运作。
2. 移动：
  - Div with class =＆＃34; class1＆＃34;按原样运作。
  - Div with class =＆＃34; class2＆＃34;按原样运作。
我是如何修复它的：
- 经过几个小时的尝试后，我才意识到我可以将第一个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 隐藏在桌面上和在手机上显示。

P.S。这是我的第一个StackOverflow问题，抱歉，如果我的代码很糟糕，我不知道它是如何工作的。谢谢你的回答。

Answer 1

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

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

什么时候应该

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

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

Nuxt.JS doesen根据需要渲染块

1 个答案: