Как обрабатывать классы стилей в Vue JS?

Question

Мне нужно динамически добавлять класс и удалять, когда это необходимо Я использую компонент texfield из материала Google. Когда ввод текста не проходит проверку, появляется ошибка, границы ввода должны быть красного цвета и под ним предупреждающее сообщение. Когда все в порядке, зеленый значок галочки. Картинка ниже, как это должно быть. Весь текст проходит проверку регулярных выражений и сохраняется в массиве ошибок (data-> textfields-> errors). Вот как я его отслеживаю при возникновении ошибки.

Здесь я динамически добавляю стили, когда возникает ошибка. Проблема в том, что я очищаю входной (пустой) класс 'tf-error' с красными полями, но мне нужно удалить его, как это было перед добавлением класса 'tf-error'. Что мне делать?

gmcTextfield(
  v-for='(item, idx) in textfields'
  :key='idx'

  :inputId='"textfield-"+idx'
  label='item.label'
  :className=`['fs', [textfields[idx].errors ? 'tf-error' : '']]`


  :reference='item'
  refProp='value'

  :numOfErrorMsgs='item.numOfErrorMsgs'


) 

Answer 1

Я использую в Vue привязку классов для применения динамических классов.Вы можете увидеть doc здесь.

Вы определяете привязку для класса и используете объект в качестве значения, где ключ - это классы, а значение - логическое выражение.

Как пример

<ul>
  <li v-for="item in menuItems"
      v-on:click="selected = item"
      v-bind:class="{ selected: selected == item}">
     {{item}}
  </li>
</ul>