force update of color object

[dasDaniel]

Is there a way to update the color externally?

[lumberman]

Looking forward to have this feature as well.

[AleksanderGrzybowski]

Is there any way to do this? I am making some forms with color input from the user, and it seems there is no way to set the color from the outside. Very good plugin, but this is just strange.

[maxcelos]

Same problem here...

[lumberman]

@xiaokaike can you please introduce publicly accessible colorChange method or any other way for us to hard refresh the current color values? Something similar to what you have in EditableInput.vue. Any help or hack in this direction will greatly help us.

Thank you!

[lumberman]

If it's not possible or hard to do, can we at least have component re-fresh method? This way we can at least re-render component with updated color form outside.

[lumberman]

Looks like I found a solution!

Color picker will not respond if you change any color model other than hex and opacity. If I change color like this in my methods it will update the color picker properly:

<input
	type="text"
	v-model="colorValue"
	v-on:keyup="updateColor" >

methods: {
	updateColor() {
		let newAlpha = 1
		let newColor = {
			hex: this.colorValue,
			a: newAlpha
		}

		this.colors = newColor
	}
}

Again colorValue (from the input field) should be in HEX format #aabbcc. In my app I use RGBA, so it requires an extra conversion from RGBA to HEX to make it work (I don't show it here for simplicity).

Good luck with your projects!

[linx4200]

Actually, when initialize colors, can just pass hex or rgba or hsl or hsv:

new Vue({
  el: '#app',
  components: {
    'photoshop-picker': photoshop
  },
  data () {
    return {
      colors: {
        h: 50,
        s: 0.5,
        l: 0.2
      }
    }
  },
})

or

new Vue({
  el: '#app',
  components: {
    'photoshop-picker': photoshop
  },
  data () {
    return {
      colors: '#ff0000'
    }
  },
})

etc.

Then you can also update hsl and it will re-render component(s).

updateColor() {
  this.colors = {
    h: 100,
    s: 0.5,
    l: 0.2
  }
}

Please be aware that you must change the whole colors. It would not take any effect by this.colors.h = 100.

I will update the README in the next release.

Thanks.