What works:

I want to render an element only if some boolean value is true using Vue 3. This is an example following the Vue 3 documentation and it works just fine:

Template:

...
<div id="btnReady" @click="ready = !ready">
   <img v-if="!ready" src="ready.svg" alt="" />
   <img v-else src="unready.svg" alt="" />
</div>
...

Script:

<script setup>
    import { ref } from "vue";
    let ready = ref(false);
</script>

What I do not understand:

That makes perfect sense to me, except i don't really understand the need of ref(). I read the documentation about it and didn't really understand how/why vue requires the initialization like this let ready = ref(false)and why using let ready = false won't react to changes to the ready variable.

What does NOT work:

Beside toggling a boolean value, the onclick handler should also perform some other actions. So instead of toggling the value like this onclick="ready = !ready" i want to call a function onclick="toggleReady". The value of ready will be toggled within the function and some other actions will be executed. The function is executed on click just fine but Vue does NOT react to the changes of the ready variable and the v-if statement does not "work" properly -> the element is still visible.

Template:

<div id="btnReady" @click="toggleReady">
    <img v-if="!isReady" src="ready.svg" alt="" />
    <img v-else src="unready.svg" alt="" />
</div>

Script:

<script setup>
   import { ref } from "vue";
   let ready = ref(false);
   let toggleReady = () => {
       ready = !ready;
       // do some more stuff
   };
</script>

Can someone explain me this behaviour and how I can fix it?

PS: I also tried using a puted property in the v-if statement instead of a normal variable. Didn't work...

What works:

I want to render an element only if some boolean value is true using Vue 3. This is an example following the Vue 3 documentation and it works just fine:

Template:

...
<div id="btnReady" @click="ready = !ready">
   <img v-if="!ready" src="ready.svg" alt="" />
   <img v-else src="unready.svg" alt="" />
</div>
...

Script:

<script setup>
    import { ref } from "vue";
    let ready = ref(false);
</script>

What I do not understand:

That makes perfect sense to me, except i don't really understand the need of ref(). I read the documentation about it and didn't really understand how/why vue requires the initialization like this let ready = ref(false)and why using let ready = false won't react to changes to the ready variable.

What does NOT work:

Beside toggling a boolean value, the onclick handler should also perform some other actions. So instead of toggling the value like this onclick="ready = !ready" i want to call a function onclick="toggleReady". The value of ready will be toggled within the function and some other actions will be executed. The function is executed on click just fine but Vue does NOT react to the changes of the ready variable and the v-if statement does not "work" properly -> the element is still visible.

Template:

<div id="btnReady" @click="toggleReady">
    <img v-if="!isReady" src="ready.svg" alt="" />
    <img v-else src="unready.svg" alt="" />
</div>

Script:

<script setup>
   import { ref } from "vue";
   let ready = ref(false);
   let toggleReady = () => {
       ready = !ready;
       // do some more stuff
   };
</script>

Can someone explain me this behaviour and how I can fix it?

PS: I also tried using a puted property in the v-if statement instead of a normal variable. Didn't work...

• javascript
• vue.js
• vuejs3
• conditional-rendering

• 1 ready.value = !ready.value; as per documentation – Bravo Commented Mar 21, 2022 at 8:26
• note: if you're using vite - you can try the experimental Reactivity Transform by adding {reactivityTransform: true} fir vue in vite.config.js ... i.e. plugins: [ vue({reactivityTransform: true}) ] - which would allow you to drop the .value - but it is experimental – Bravo Commented Mar 21, 2022 at 8:33
• This works indeed. But why can we simply write onclick="ready = !ready" but have to write ready.value = !ready.value when using a function? Also why do i have to access the value property in the script section but when checking in the v-if statement i check like this v-if="ready" and not v-if="ready.value"? – Quaenor Commented Mar 21, 2022 at 8:37
• EDIT: I should have read the docs before asking questions... Makes sense to me, although i think the aproach in Vue 2 was more straight forward to understand. Not sure how exactly this was done there tho. – Quaenor Commented Mar 21, 2022 at 8:43
• how exactly this was done there how what was done where? the first code doesn't need to use .value ... as documented – Bravo Commented Mar 21, 2022 at 10:12

1 Answer 1

As @Bravo mentioned in the ments you should use in your js code ready.value = !ready.value; instead of ready = !ready; (https://vuejs/api/reactivity-core.html#ref)

If you just want to change the source of an image, you can use conditional attribute rendering like so:

  ...
    <div id="btnReady" @click="ready = !ready">
       <img :src="!ready ? 'ready.svg' : 'unready.svg'" alt="" />
    </div>
    ...