使用颜色选择器检测输入值的更改 - vue2

问题描述

我正在使用 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)"                   

                  />

解决方法

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

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>