CALIFORNIVS Posts - Answer Overflow

CALIFORNIVS

•Created by CALIFORNIVS on 6/14/2024 in #❓・help

v-if child attribute and child merging

To forewarn, I'm a bit new to nuxt and the vue ecosystem as a whole, but in essence my problem can be summarized by the following: When I use a v-if on a reactive object, it's merging the attributes and children of both the element on which I placed the v-if, with the element that contains the v-else. For reference, I'm also using vueuse and don't believe that has anything to do with it, but am including it anyways. For reference: we can see this small example: https://stackblitz.com/edit/github-rcpk3p?file=app.vue

  <div v-if="lgAndLarger" id="a">LgandLarger is true!</div>
  <div v-else id="b">LgandLarger is false!</div>

  <div v-if="lgAndLarger" id="a">LgandLarger is true!</div>
  <div v-else id="b">LgandLarger is false!</div>

with the script setup component being as follows:

import { breakpointsTailwind } from '@vueuse/core';
const breakpoints = useBreakpoints(breakpointsTailwind);
const lgAndLarger = breakpoints.greaterOrEqual('lg');

import { breakpointsTailwind } from '@vueuse/core';
const breakpoints = useBreakpoints(breakpointsTailwind);
const lgAndLarger = breakpoints.greaterOrEqual('lg');

Here, when I first launch the page in full screen, lgAndLarger is set to true. However, when looking at the elements diplayed, the page displays LgandLarger is true! However, the id of the element is set to be b. I'm a bit unsure on how to resolve this as it's causing my page to show a weird amalgamation of my mobile and desktop views causing me more than a few issues 😅. Thanks in advance for any help!

24 replies

Gaming

Programming