Troubleshooting: Why is Vue's v-if directive not updating after using on

Question

Troubleshooting: Why is Vue's v-if directive not updating after using on

I'm facing an issue where I want a div to only appear once a specific variable changes from false to true. I have tried changing the value of the variable once the component is mounted, but the v-if directive does not seem to work as expected in displaying the div.

<script setup>
  import { onMounted } from 'vue'

  let onceMounted = false
  
  onMounted(() => {
    onceMounted = true
    console.log(onceMounted)
  });

<div>
  Hello
  <div v-if="onceMounted === true">
    World
  </div>
</div>

Although the console log shows that the variable changes correctly, the v-if directive does not update the div. I have even tried using v-show after researching similar issues like this one. Is there something essential that I might be overlooking?

javascript vue.js

Answer 1

Answer №1

enableReactive should be made reactive using a reference, then utilize .value to modify it:

<script setup>
  import { onMounted, ref } from 'vue'

  const enableReactive = ref(false)
  
  onMounted(() => {
    enableReactive.value = true
    console.log(enableReactive.value)
  });
</script>
<div>
  Hello
  <div v-if="enableReactive"><!-- no need for .value in the template -->
    World
  </div>
</div>

Answer 2

enableReactive should be made reactive using a reference, then utilize .value to modify it:

<script setup>
  import { onMounted, ref } from 'vue'

  const enableReactive = ref(false)
  
  onMounted(() => {
    enableReactive.value = true
    console.log(enableReactive.value)
  });
</script>
<div>
  Hello
  <div v-if="enableReactive"><!-- no need for .value in the template -->
    World
  </div>
</div>

Answer 3

Answer №2

Don't overlook the need to assign a value of true to the onceMounted variable;

Previous Code:

onMounted(() => {
    onceMounted = false
    console.log(onceMounted)
  });

Updated Code:

onMounted(() => {
    onceMounted = true
    console.log(onceMounted)
  });

Answer 4

Don't overlook the need to assign a value of true to the onceMounted variable;

Previous Code:

onMounted(() => {
    onceMounted = false
    console.log(onceMounted)
  });

Updated Code:

onMounted(() => {
    onceMounted = true
    console.log(onceMounted)
  });

Troubleshooting: Why is Vue's v-if directive not updating after using on

Answer №1

Answer №2

Similar questions

Guide on Generating Dynamic JSON to Set and Retrieve Values for Forms and Displaying the Bound Values

"Using Three.js GLTF, switch the material of one object to match the material of

On startup of the chrome app, read and load a JSON file into a variable

Nuxt - asyncData ISSUE: "Variable '$axios' is inferred to have an 'any' type."

Having trouble updating the ASP Dropdown that has list items added through a jQuery AJAX call? Keep receiving the error message "Invalid postback or callback"?

I am looking to host several iterations of jQuery on a content delivery network within my Nuxt application

Attempting to store a specific h1 text.event as a variable, allowing it to be saved upon input of the initial letter

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

POST request returned a null response in the xhr.responseText

What is the best way to sort a table by column index using HTML?

Ensuring that Bootstrap rows fill the entire height within a column

Patience is key when waiting for Ajax response data in Vue.js

You are not able to access the instance member in Jest

Characters that have been escaped are showing up when adding them to an HTML element

What is the best way to update React State after making an asynchronous call to MongoDB?

The "variable" used in the React app is not defined, resulting in a no

What is the best way to display an image in HTML?

Encountering problem animating rotation of a .glb model post gltfjsx conversion

What is the best way to combine JSON objects from a two-dimensional array into a single array using JavaScript?

Generate a customized form based on selected radio button option