Why is it not possible to achieve reactivity with ref in Vue 3?

Question

I am trying to change the value by clicking on the button, but Vue does not update this value, although it is updated in the console:

<script setup>
import { ref } from 'vue'
let value = ref(false);
function update() {
    value =! value
    console.log(value); // changed
}
</script>

<template>
  <button @click="update">UPDATE</button>
  <p>
    {{ value }} - not changed
  </p>

</template>

I created an example in Vue SFC Playground: https://sfc.vuejs.org/example_not_change_value

Where do I make a mistake and how to fix it?

You can always prefer const to let where applicable to avoid accidental reassignments — Estus Flask
– Estus Flask, Commented Mar 13, 2023 at 8:40

hamaronooo · Accepted Answer · 2023-03-13 08:28:56Z

1

You should use .value in script when using Ref.
This may help.

<script setup>
import { ref } from 'vue'
let value = ref(false);
function update() {
    value.value = !value.value
    console.log(value.value); // changed
}
</script>

<template>
  <button @click="update">UPDATE</button>
  <p>
    {{ value }} - not changed
  </p>

</template>

answered Mar 13, 2023 at 8:28

hamaronooo

5734 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is it not possible to achieve reactivity with ref in Vue 3?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related