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!

LgandLarger is true!

However, the id of the element is set to be

. 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!

StackBlitzfarhan-habib

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

Nuxt•2y ago•

23 replies

CALIFORNIVS

v-if child attribute and child merging

  <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!

LgandLarger is true!

However, the id of the element is set to be

. 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!

StackBlitzfarhan-habib

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

v-if child attribute and child merging

v-if child attribute and child merging

Similar Threads

Similar Threads

Similar Threads