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

user_11971876 0
Viewed 3789

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

vue-reactivity vuejs3 vue-composition-api vue.js
2 Answers

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';
user_9238460

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

user_87253950
Related