CODEWITHSUNDEEP
vue.jsvuejs3
Dave
Dave

Reputation: 2018

Div doesn't appear after using v-if statement

<div class="min-h-screen flex" ref="mapDiv"></div>
<div class="bg-white absolute top-0 w-full overflow-y-auto"></div>

This is how it looks enter image description here

Whenever I add to this div v-if <div class="bg-white absolute top-0 w-full overflow-y-auto" v-if="settingsToggled"></div>

The div doesn't show up at all, even after being triggered to true. Screenshot:

enter image description here

I am returning settingsToggled in the setup function.

This is the code that triggers it:

export function AvatarControl(controlDiv, settingsToggled) {
    const controlUI = document.createElement("div");
    controlUI.style.width = "100px";
    controlUI.style.margin = "10px"
    controlUI.style.height = "100px";
    controlUI.style.borderRadius = "8px"
    controlUI.style.backgroundImage = "url('https://www.pngkey.com/png/full/114-1149878_setting-user-avatar-in-specific-size-without-breaking.png')"
    controlUI.style.backgroundPosition = "center"
    controlUI.innterHTML = "Avatar";
    controlUI.style.zIndex = "9999";
    controlDiv.appendChild(controlUI);
    controlUI.addEventListener("click", () => {
        console.log(settingsToggled)
        settingsToggled = !settingsToggled
    })
  }

Anyone knows what might be the issue here? Can I not modify the settingsToggled from outside this component?

Upvotes: 0

Views: 211

Answers (2)

Daniel Martinez
Daniel Martinez

Reputation: 537

You need a component data property for settingstoggled otherwise vue v-if hook will not find it.

Try like this in your .vue file:

data () {
   return {
      settingstoggled: true
  }
}

You can find more info on component data here.

Upvotes: 0

tony19
tony19

Reputation: 138226

In AvatarControl, settingsToggled appears to be a Boolean (based on settingsToggled = !settingsToggled), while your screenshot shows it as a ref, so I'm guessing you are passing the ref's value to AvatarControl like this:

// MyComponent.vue
new AvatarControl(controlDiv, settingsToggled.value)

But Booleans are passed by value, so the function can't modify the original variable like that. However, the function can modify the value of a ref argument:

// MyComponent.vue
new AvatarControl(controlDiv, settingsToggled)

// AvatarControl.js
export function AvatarControl(controlDiv, settingsToggled) {
    const controlUI = document.createElement("div");
    //...
    controlUI.addEventListener("click", () => {
        settingsToggled.value = !settingsToggled.value
    })
  }
}

Upvotes: 1

Related Questions