Vuejs - Получить динамически генерируемое поле ввода и его значение и изменить его цвет при изменении - PullRequest
Новая
       97

Vuejs - Получить динамически генерируемое поле ввода и его значение и изменить его цвет при изменении

0 голосов
/ 25 февраля 2020

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

Метод v-слота таков: 

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

Эта часть отлично работает: -)

My проблема в том, что я хотел бы закрасить измененное значение поля ввода и отслеживать его значение, поэтому, если его значение возвращается к значению по умолчанию, то цвет по умолчанию возвращается к исходному цвету. Как:

| _hello _ | _default _ | _input _ |
| ____ | ____ | ____ |

| _hello _ | _color _ | _input _ |
| ______ | _______ | ______ |

Таким образом, значение «default» не окрашивается, а при изменении на «color» поле ввода должно быть красного цвета. При возврате к «по умолчанию» цвет должен быть сброшен.

«item[field.key]» представляет каждый из значений ячейки таблицы: «привет», «по умолчанию», «ввод», «цвет» и т. Д. c.

Я пытался просмотреть "v-bind: class {active: active}" и v-on: change (item [field.key]) и Vues Watch, но я просто могу не найти путь ..

Спасибо в отношении

1 Ответ

0 голосов
/ 25 февраля 2020

Я сделал небольшую демонстрацию, показывающую, как применять класс css, когда значение отличается.

Надеюсь, это поможет. 

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