Vue.js Vuejs-获取动态生成的输入字段及其值，并在更改时更改其颜色

在Vue.js中，我创建了一个带有可编辑字段的表。 表字段是动态生成的，如下所示：

   <b-table :items="filtered" :fields="columns">
      <template v-for="field in editableFields" v-slot:[tableCell(field.key)]="{ item }">
        <b-form-input  v-model="item[field.key]" v-bind:key="field.key""/>
      </template>
    </b-table>

那部分很好：-）

我的问题是，我希望为更改的输入字段值着色并跟踪其值，因此，如果其值更改回默认值，则颜色将默认回原始颜色。比如：

|_你好124; 124; 124; 124; 124;默认124; 124;输入124;
|____|____|____|

|_你好124; 124; 124; 124; 124; 124;颜色124; 124;输入124;
|______|_______|______|

因此，值“default”不带颜色，当更改为“color”时，输入字段将显示为红色。 当更改回“默认”时，应重置颜色

“

项[field.key]

”表示表格单元格的每个值：“hello”、“default”、“input”、“color”等

我试过查看“v-bind:class{active:active}”和v-on:change（item[field.key]）以及Vues Watch，但我就是找不到方法

---

感谢您的关注

我做了一个快速演示，演示了如何在值不同时应用css类

我希望这有帮助

。已更改{
背景颜色：橙色；
颜色：白色；
}

新Vue({
el:“#应用程序”，
数据：函数（）{
返回{
oldValue:“你好”，
newValue：“你好”
}
}
})

你能解释一下为什么“v-bind:class{active:active}”不起作用吗？您应该能够执行以下操作：class=“{active:originalValue！==newValue}”是的，当然可以。例如，如果值为“hello”，我将其更改为“hellooo”，则“active=true”，这是正确的。如果我将该值更改为“halloo”，则“active=false”，这是错误的，因为该值仍在更改。而且，如果active为true或false，我不知道如何将样式类绑定到对象。这就是：class=“{active:active}”所做的，当Vue js属性“active”为true时，它会放置一个名为“active”的样式类

tableCell(fieldkey) {
  return `cell(${fieldkey})`;
}