Vuejs：如果更改了关联的v模型值，则vue-color不会更改选择器的位置

Question

我正在使用vue-color的“素描”选项进行颜色选择。它使用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。

我认为这不是预期的行为，也可能不是错误。该问题应该怎么解决？

Answer 1

检测对象的更改在Vue / JavaScript中有点细微差别。请参见https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats和手表https://vuejs.org/v2/api/#vm-watch

的深入选择

您可能只需要使用

this.colors = Object.assign({}, this.colors, { a: 0.5, hex: "#ff00ff" })