使用颜色选择器检测输入值的变化 - vue2

Question

我正在使用 vue2 外部的颜色选择器组件。虽然它渲染得很好并且似乎在基本用法中运行良好，但我无法检测到 vue 组件中输入值的变化。我尝试将 @change 添加到组件实例，尽管它似乎从未触发。知道这是为什么吗？请注意，值会更改颜色十六进制值，但不会在输入中进行数据绑定

问题是 item.color 永远不会改变.. 来自输入的新值被分配给来自脚本外部颜色选择器的输入值，但永远不会分配给 item.color（从不绑定） 并且无法捕捉到新的价值

我没有发现他们抓住他们的行动

我使用@change 我用@focus

<input
                    class="inp input_flexible"
                    :data-did="'A' + (index + 1) + '-colorPicker'"
                    name="color"
                    :id="'color_' + item.TIER_ID"
                    autocomplete="off"
                    type="text"
                    v-model="item.color"
                    v-on:input="cambiarcolor($event)"
                    @click="metodocolor(index, $event)"
                    @blur="metodoblur(index,$event)"
                    @change="cambiarcolor($event)"                   

                  />

Answer 1

当item.color（v-model 绑定）发生变化时，您可以使用watch 执行某些操作。

new Vue({
  el: '#app',
  data() {
    return {
      item: {
        color: ""
      },
      doSomething: ""
    }
  },
  
  watch: {
    "item.color"(newValue) {
      this.doSomething = newValue;
    }
  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="radio" value="#FFFFFF" v-model="item.color">
  <label>White</label>
  <br>
  <input type="radio" value="#000000" v-model="item.color">
  <label>Black</label>
  <br>
  <span> {{ doSomething }} </span>
</div>