Vuejs：如果更改链接的 v-model 值，vue-color 不会更改选择器位置
Vuejs: vue-color is not changing picker location if linked v-model value is changed
我正在使用 vue-color 的 Sketch 选项进行颜色选择。它使用 v-model 来传达颜色变化，如下所示：
<sketch-picker v-model="colors" />
其中colors是初始化如下的数据：
colors: {hex: "#c0392b", a: 1}
加载页面时，颜色选择器位于预期位置，即（十六进制：#c0392b）。在更改选择器位置时，colors 值按预期更改。
当我在如下方法中更改 colors 值时出现问题：
this.colors.hex = "#ff00ff";
this.colors.a = 0.5;
在这种情况下，即使数据 colors 值已更改（已确认），颜色选择器仍指向旧位置，即 #c0392b。
我认为这不是预期的行为，也可能是错误。应该如何解决这个问题？
检测对象的变化在 Vue/JavaScript 中有点细微差别。参见 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats and the deep option of watch https://vuejs.org/v2/api/#vm-watch
您可能只需要使用
this.colors = Object.assign({}, this.colors, { a: 0.5, hex: "#ff00ff" })
我正在使用 vue-color 的 Sketch 选项进行颜色选择。它使用 v-model 来传达颜色变化，如下所示：
<sketch-picker v-model="colors" />
其中colors是初始化如下的数据：
colors: {hex: "#c0392b", a: 1}
加载页面时，颜色选择器位于预期位置，即（十六进制：#c0392b）。在更改选择器位置时，colors 值按预期更改。
当我在如下方法中更改 colors 值时出现问题：
this.colors.hex = "#ff00ff";
this.colors.a = 0.5;
在这种情况下，即使数据 colors 值已更改（已确认），颜色选择器仍指向旧位置，即 #c0392b。
我认为这不是预期的行为，也可能是错误。应该如何解决这个问题？
检测对象的变化在 Vue/JavaScript 中有点细微差别。参见 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats and the deep option of watch https://vuejs.org/v2/api/#vm-watch
您可能只需要使用
this.colors = Object.assign({}, this.colors, { a: 0.5, hex: "#ff00ff" })