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服務器可以使用它。