I am currently developing a nuxt.js SSR web application and encountered an unusual issue.
<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>
Allow me to break down this situation:
- Explanation of expected behavior:
- The div with class "class1" should be visible by default on Desktop, but disappear when hovering over the container. On mobile devices, it should remain hidden at all times.
- The div with class "class2" should be hidden on Desktop, but become visible upon hovering over the container. On mobile devices, it should always be displayed.
- Current functionality:
- On Desktop:
- The div with class "class1" remains hidden until I hover over the container once, then behaves as intended.
- The div with class "class2" functions correctly.
- On Mobile:
- The div with class "class1" works as expected.
- The div with class "class2" works as expected.
- On Desktop:
- Solution:
- After several hours of troubleshooting, I realized that I could update the v-show directive on the first div to
v-show="!hovered"and apply a media query for mobile screensdisplay:none;. This resolved the issue specific to Desktop usage.
- After several hours of troubleshooting, I realized that I could update the v-show directive on the first div to
However, why does it behave differently when using
v-show="!hovered && isDesktop"v-show="!hovered && isDesktop"v-show="!false && undefined"v-show="hovered || !isDesktop" function correctly, even though it should result in v-show="false || !undefined", displaying the div on Mobile and hiding it on Desktop.
P.S. This marks my inaugural post on StackOverflow, apologies if the code formatting is subpar—I'm still learning how it operates. Thank you in advance for any insights provided.