Vue template does not update value (composition api)

Question

I have a functional component:

export default defineComponent({
  name: 'MovieOverview',
  components: {
    ExpandedMovieInformation,
  },
  setup() {
    let toggleValue = false;

    const toggleExpandedMovieInformation = (moviex: Movie) => {
      toggleValue = !toggleValue;
      console.log(toggleValue)
    };

    return {
      toggleValue,
      toggleExpandedMovieInformation,
    };
  },
});

<template>
  <div>
    <button v-on:click='toggleExpandedMovieInformation'>click</button>
    {{ toggleValue }}
  </div>
</template>

When I click the button the console.log does log the change, but the toggleValue in the template stays the same value: false.

sebasaenz · Accepted Answer · 2020-09-03 13:44:43Z

3

Right now the toggleValue variable has no reactivity. You should use ref() or reactive() in order to make it reactive so the view re-renders every time changes are made into that property.

So you should do something like this:

import { ref } from 'vue'

export default defineComponent({
  name: 'MovieOverview',
  components: {
    ExpandedMovieInformation,
  },
  setup() {
    let toggleValue = ref(false);

    const toggleExpandedMovieInformation = (moviex: Movie) => {
      // now you'll have to access its value through the `value` property
      toggleValue.value = !toggleValue.value; 
      console.log(toggleValue.value)
    };

    return {
      toggleValue,
      toggleExpandedMovieInformation,
    };
  },
});

<template>
  <div>
    <button v-on:click='toggleExpandedMovieInformation'>click</button>
    <!-- You DON'T need to change toggleValue to toggleValue.value in the template -->
    {{ toggleValue }}
  </div>
</template>

Check the docs for more info about ref and reactive.

answered Sep 3, 2020 at 13:44

sebasaenz

1,9662 gold badges23 silver badges26 bronze badges

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

2 Comments

Peter Boomsma Over a year ago

Ah I was close. I tried that but tried to set the changed toggle value directly on the toggleValue which gives an error since that property is a ref I can't set a boolean directly on it. But had to set it on the value member that toggleValue ref propertie.

Peter Boomsma Over a year ago

each value that's being used in the template that can be changed has to be a reference() or a ref() instance?

Collectives™ on Stack Overflow

Vue template does not update value (composition api)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related