2

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 computed property in the v-if statement instead of a normal variable. Didn't work...

Quaenor
  • 21
  • 1
  • 3
  • 1
    `ready.value = !ready.value;` as per *[documentation](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref)* – Bravo Mar 21 '22 at 08:26
  • note: if you're using `vite` - you can try the experimental [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html#explicit-opt-in) 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 Mar 21 '22 at 08: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 Mar 21 '22 at 08: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 Mar 21 '22 at 08:43
  • `how exactly this was done there` how what was done where? the first code doesn't need to use `.value` ... as documented – Bravo Mar 21 '22 at 10:12

1 Answers1

3

As @Bravo mentioned in the comments you should use in your js code ready.value = !ready.value; instead of ready = !ready; (https://vuejs.org/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>
    ...
MrFabio_25
  • 478
  • 5
  • 9