[英]Nuxt.JS doesen't render blocks as I need
I'm building nuxt.js SSR web app and I face strange issue. 我正在构建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>
I'll explain this by few steps. 我将通过几个步骤解释这一点。
v-show="!hovered"
and set media query on mobile screen display:none;
经过几个小时的尝试,我才意识到我可以将第一个div上的v-show="!hovered"
重写为v-show="!hovered"
并在移动屏幕上设置媒体查询display:none;
. 。 So I fixed the only Desktop issue that I have. 所以我修复了我唯一的桌面问题。 But why does it works this way when I have v-show="!hovered && isDesktop"
? 但是当我有v-show="!hovered && isDesktop"
时,它为什么会这样运作? I guessed that first load on Nuxt.JS goes on server, so isDesktop is returned as undefined so v-show="!hovered && isDesktop"
turns into v-show="!false && undefined"
. 我猜测Nuxt.JS上的第一个加载在服务器上,所以isDesktop返回为undefined,因此v-show="!hovered && isDesktop"
变成v-show="!false && undefined"
。 But then why second div's v-show directive: v-show="hovered || !isDesktop"
works fine if it should turn into v-show="false || !undefined"
but I still got this div hidden on Desktop and displayed on Mobile . 但是为什么第二个div的v-show指令: v-show="hovered || !isDesktop"
可以正常工作,如果它应该变成v-show="false || !undefined"
但我仍然将这个div 隐藏在桌面上并显示在手机上 。
PS This is my first StackOverflow question, sorry if I styled code badly, I dont get how it works. PS这是我的第一个StackOverflow问题,对不起,如果我的代码很糟糕,我不知道它是如何工作的。 Thank you for answers. 谢谢你的回答。
The weird behavior probably comes from this line 奇怪的行为可能来自这条线
window.screen.width > 1024 ? return true : return false
when it should be 什么时候应该
return window.screen.width > 1024 ? true : false
The syntax is incorrect. 语法不正确。 Nuxt won't even compile it when i tried. 当我尝试时,Nuxt甚至不会编译它。 I wonder why your Nuxt server can work with this. 我想知道为什么你的Nuxt服务器可以使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.