Possibility to put HEX in and get only the HEX out (no other color formats)

[range-of-motion]

As the title says. When I say myHex: '#FF0000', and use that as the v-model, I expect the updated myHex variable to be a HEX code, not an object containing a HEX code (and other color formats).

Is this possible?

[Pixney-William]

If i undersand your question, then you can do this:

<chrome-picker @input="input" v-model="colors" />

and listen to it and get the value from it:

  methods: {
    input(color) {
      console.log(color.hex);
    }
  }

[sebbmeyer]

but if you have multiple color pickers on one page, that's not going to help, because every picker would need his own input method

[linx4200]

Uniforming input and output format seems like a common request. Gonna think about it. But this is a breaking change, so if it takes not much efforts, will implement in 3.0 version.

[range-of-motion]

Yes please 😩

[downtest]

Consider vue-select`s example in this case, they use reduce callback to pass only needed data to v-model https://vue-select.org/guide/values.html#returning-a-single-key-with-reduce

[akicho8]

I was troubled with the same problem. As a result of trial and error, I wrote temporarily as follows.

data() {
  return {
    myHex: "#C6E1B880",
  }
}

<chrome-picker :value="myHex" @input="c => myHex = c.hex8" />

It is a pity that v-model can not be used very effectively

[Tofandel]

You can also write <chrome-picker :value="myHex" @input="myHex = $event.hex8" />