Vuetify.js 更改@change事件上的v文本字段背景组件

我的目标是在输入值更改时将vuetify v-text-field组件的颜色更改为不同的颜色

我尝试在vuetify控制器中使用@change事件，但它只传递事件中的文本值，因此我无法将任何其他类绑定到实际组件

显然，我可以为每个特定控件使用布尔值，并让每个@change事件分别访问这些控件，但我希望有一种更可重用/通用的方法来实现这一点

<template>
  <v-text-field
    label="Project"
    @changed="updateBackground"
  ></v-text-field>
</template>
<script>
  export default {
    methods: {
      changeBackground(event) {
        //change background color of component with props here?
      },
    }
  }
</script>

导出默认值{
方法：{
更改背景（事件）{
//在这里用道具更改组件的背景色？
},
}
}

更新：

看起来您想要修改元素属性，例如添加类…等等。。。为此，您可以将

ref

属性绑定到输入，然后在方法上操作该元素，如：

updateBackground（）{
//nextTick是DOM更新的时间
这个.$nextTick（（）=>{
此.$refs.input.$el.classList.remove（'red'））
此.$refs.input.$el.classList.add（'blue'））
});

在您的模板上：

---

这是一个工作示例：

更新：

看起来您想修改元素属性，例如添加类…等…为此，您可以将

ref

属性绑定到输入，然后在方法上操作该元素，如：

updateBackground（）{
//nextTick是DOM更新的时间
这个.$nextTick（（）=>{
此.$refs.input.$el.classList.remove（'red'））
此.$refs.input.$el.classList.add（'blue'））
});

在您的模板上：

---

这是一个工作示例：

这会起作用，但问题是我需要为我想要跟踪的每个组件创建一个单独的back样式变量。我希望有一种更通用的方法，在这种方法中，我能够实际添加和删除一个新的css类，或者由于组件样式属性而直接绑定。这将rk，但问题是，我需要为我想要跟踪的每个组件创建一个单独的back样式变量。我希望有一种更通用的方法，在这种方法中，我能够实际添加和删除一个新的css类，或者由于组件样式属性而直接绑定。

<v-text-field 
      ref="input"
      label="Project"
      @change="updateBackground"
      class="red"
></v-text-field>