deetstrab Comments - Answer Overflow

well of course and I see it as that simple too, fwiw - I've just been taught that it's an antipattern. I didn't consider it for that reason, but you're absolutely right - it's a simple solution that works perfectly!

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

I just wanted to force myself to do it the Vue/Nuxt way

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

That's exactly how I do it in vanilla/es

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

Yes but isn't targeting the DOM nodes like this an anti-pattern in Vue/Nuxt?

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

It's possible a wrapper div would have worked too - this is a pattern I've used in many mobile navs that I've built over the years, though.

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

As I see it, yes. I needed to disable scrolling of the website while my mobile nav is open.

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

Thank you all for your helpfulness and thoughtful replies

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

I need to understand why this needs to be a function to work? What would be a good resource to read to better grasp this concept? Thanks in advance! 🙂

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

useHead({
  bodyAttrs: {
    // class: displayMobileNav.value ? 'navOpen' : '' // Didn't work
    class: () => displayMobileNav.value ? 'navOpen' : '' // Works like a charm inside the anonymous function
  }
})

useHead({
  bodyAttrs: {
    // class: displayMobileNav.value ? 'navOpen' : '' // Didn't work
    class: () => displayMobileNav.value ? 'navOpen' : '' // Works like a charm inside the anonymous function
  }
})

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

This is exactly what I'm doing and have tried all variants of this that I know to.

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

42 replies

NNuxt

•Created by deetstrab on 6/30/2024 in #❓・help

Reactively add/remove a class name to <body>, from within a component...

useHead works to set the initial value of title, bodyAttrs.class, etc -- but none of these properties appear to be reactive.

42 replies

Gaming

Programming