在@change事件上更改V-Text-Field背景组件

Question

我的目标是在输入值发生变化时将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>

Answer 1

更新：

看起来您想修改元素属性，例如添加类...等...因为您可以将ref属性绑定到输入，然后在方法上操作该元素，例如：

updateBackground() {
    // nextTick is when the DOM gets updated
    this.$nextTick(() => {
      this.$refs.input.$el.classList.remove('red')
      this.$refs.input.$el.classList.add('blue')
    });

在您的模板上：

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

这是一个有效的示例：https：//codepen.io/dadboz/pen/pmjbgw