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

Question

在 Vue.js 中，我创建了一个带有 editable 字段的 table。 table 字段是动态生成的，例如：

   <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>

v槽的方法是这样的：

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

那部分工作得很好 :-)

我的问题是我想为更改后的输入字段值着色并跟踪它的值，因此如果它的值变回默认值，则颜色默认变回原始颜色。喜欢：

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

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

所以值 "default" 没有颜色，当更改为 "color" 时，输入字段应该是红色的。改回 "default" 时，应重置颜色。

“item[field.key]”代表每个 og table 单元格值："hello"、"default"、"input"、"color" 等.

我已经尝试研究 "v-bind:class {active: active}" 和 v-on:change(item[field.key]) 和 Vues Watch，但我找不到方法..

谢谢你的问候

Answer 1

我做了一个快速演示，展示了当值不同时如何应用 css class。

希望对您有所帮助。

.changed {
   background-color: orange;
   color: white;
}

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

<div id="app">
<input type="text" :class="{ changed : oldValue !== newValue }" v-model="newValue" />
</div>

<script>
new Vue({
  el: '#app',
  data: function() {
    return {
      oldValue: "Hello",
      newValue: "Hello"
    }
  }
})
</script>

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

Vuejs - Get dynamically generated input field and its value and change its color on change

data-binding

dynamic-programming

css-tables

vue.js

vue-component