@color-change event doesn't work when I change props :color

[inndim]

Steps to reproduce

<template>
    <div>
        <div>
            <button v-on:click="setColor">Set Color</button>
        </div>

        <VueColorPicker :color="selectedColor" default-format="hex" v-on:color-change="updateColor"/>
    </div>
</template>

<script>

    import { ColorPicker } from 'vue-accessible-color-picker';
    import 'vue-accessible-color-picker/styles';

    export default {
        components: {
            'VueColorPicker': ColorPicker,
        },
        data() {
            return {
                selectedColor: '#000000',
            };
        },
        methods: {
            updateColor(eventData) {
                console.log(eventData);
            },
            setColor(){
                this.selectedColor = '#f50c0cff';
            },
        },
    };
</script>

Current result

When the "Set Color" button is pressed, the event "color-change" is triggered only the first time

Expected result

When you press the "Set Color" button, the color should change and the event "color-change" should fire. The problem is that the event "color-change" fires only the first time the button is clicked; if you manually change, for example, transparency or color, and then click the button again, the event does not work.

Environment

• vue-accessible-color-picker version:
• VITE v4.5.0
• Vue 3.3.7

[kleinfreund]

Hey @inndim, can you provide me with some more information and fill out the empty sections (steps to reproduce, current result, expected result, environment), please? Otherwise, I cannot help you solve this issue.

[inndim]

Hey @inndim, can you provide me with some more information and fill out the empty sections (steps to reproduce, current result, expected result, environment), please? Otherwise, I cannot help you solve this issue.

I updated the question with the problem

[kleinfreund]

@inndim Thank you very much for updating your ticket. That helps me understand what's going on.

The reason this doesn't work as you'd expect in the code you've provided is this: When you click the button to set the selectedColor for the first time, Vue will observe a change (from '#000000' to '#f50c0cff') through its reactivity system. The color picker picks that change up (as you observed). Now interacting with the color picker continues to work, but clicking the button for the second time seemingly doesn't do anything.

The reason for this is that Vue doesn't actually see anything change. selectedColor is still set to the value '#f50c0cff' and clicking the button again doesn't change that (it just tries to set the same value): Vue's reactivity doesn't kick in here. That's why the color picker doesn't react to this either.

With a small change in your updateColor method, you can update the selectedColor variable in response to the color picker's changes:

updateColor(eventData) {
    this.selectedColor = eventData.colors.hex
},

Then, clicking the button again will actually have an effect because updating selectedColor will trigger Vue's reactivity system.

Long story short, this isn't a bug with the color picker.

[inndim]

@inndim Thank you very much for updating your ticket. That helps me understand what's going on.

The reason this doesn't work as you'd expect in the code you've provided is this: When you click the button to set the selectedColor for the first time, Vue will observe a change (from '#000000' to '#f50c0cff') through its reactivity system. The color picker picks that change up (as you observed). Now interacting with the color picker continues to work, but clicking the button for the second time seemingly doesn't do anything.

The reason for this is that Vue doesn't actually see anything change. selectedColor is still set to the value '#f50c0cff' and clicking the button again doesn't change that (it just tries to set the same value): Vue's reactivity doesn't kick in here. That's why the color picker doesn't react to this either.

With a small change in your updateColor method, you can update the selectedColor variable in response to the color picker's changes:

updateColor(eventData) {
  this.selectedColor = eventData.colors.hex
},

Then, clicking the button again will actually have an effect because updating selectedColor will trigger Vue's reactivity system.

Long story short, this isn't a bug with the color picker.

You're right. Thank you very much for helping me understand the problems.