Reactive object in Vue 3 Composition API not updating with a @click event

Question

I seem to be missing something with the Vue Composition API when it comes to using and updating reactive objects.

See the below code. I'm expecting the click event to update the {{colors}} output in the template when a color is added.

<template>
  <div>
    <!-- {{colors}} Is not updated in the DOM on click event -->
    <pre>{{ colors }}</pre>
    <button @click="addColor">add color</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    let colors = reactive({ green: '#ccc000' });

    function addColor() {
      // By cloning and creating a new merged object
      colors = Object.assign({}, colors, { red: '#fff000' });
      // Or by changing the object directly
      colors.orange = '#322332'; // Also does not work
      console.log(colors); // Logs out the correct value
    }

    return {
      colors,
      addColor,
    };
  },
};
</script>

I can see in the console log the value of colors is being updated but not in the DOM.

Here is a code sandbox of the code

https://codesandbox.io/s/mystifying-roentgen-rox9k?file=/src/App.vue

I checked sandbox link you provided. In the sandbox , the DOM is updated by click! — Mohsen Arab
– Mohsen Arab, Commented Jan 30, 2024 at 10:03

obe · Accepted Answer · 2021-06-09 00:38:08Z

2

You probably shouldn't create a new object:

colors = Object.assign({}, colors, { red: '#fff000' });

Instead, try to manipulate the existing object:

delete colors.green;
colors.red = '#fff000';

answered Jun 9, 2021 at 0:38

obe

7,8546 gold badges34 silver badges47 bronze badges

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

9 Comments

AndyJamesN Over a year ago

I actually updated my example a little earlier showing exactly what you suggested as it also does not work. edit: I removed the Object assign line and it works

obe Over a year ago

Instead of the colors = Object.assign(), not in addition.

Husam Elbashir Over a year ago

@AndyJamesN You've replaced your reactive proxy with a normal object. That's why it didn't react when you manipulated it directly.

obe Over a year ago

and by the way, a cooler syntax for colors = Object.assign... would be colors = { ...colors, red: '#fff000' } :)

AndyJamesN Over a year ago

What I am going to do as a workaround is use Vuex store instead. This will allow me to edit my main color object (which is in reality much more complex than just colors) as needed and use computed to keep things reactive. Thanks for all the feedback.

|

MD SHAYON · Accepted Answer · 2021-08-04 13:47:32Z

0

your colors object and function should be like this

 const colors = reactive({ green: "#ccc000" });
    function addColor() {
      colors.green = "rgb(23, 117, 109)";
    }

don't forget to return colors and addColor from setup

in your template add

<pre>{{ colors.green }}</pre>
    <button @click="addColor">add color</button>

this should work

answered Aug 4, 2021 at 13:47

MD SHAYON

8,11156 silver badges43 bronze badges

Comments

Mohammadreza Khalilikhorram · Accepted Answer · 2024-05-02 17:01:42Z

0

After this assignment:

colors = Object.assign({}, colors, { red: '#fff000' });

you set a new object without reactivity to the colors variable to change it to the correct code you can change it to this:

colors = Object.assign(colors, { red: '#fff000' }, );

answered May 2, 2024 at 17:01

Mohammadreza Khalilikhorram

5454 silver badges9 bronze badges

Comments

MaxSemenov · Accepted Answer · 2022-12-10 03:46:11Z

-1

By doing so first:

colors = Object.assign({}, colors, { red: '#fff000' });

You damage the reactivity

Now this absolutely appropriate line of code colors.orange = '#322332' does not work since the reactivity already lost

The solution is - remove the first attempt

answered Dec 10, 2022 at 3:46

MaxSemenov

73 bronze badges

Collectives™ on Stack Overflow

Reactive object in Vue 3 Composition API not updating with a @click event

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related