Как правильно сделать валидацию формы Vue?

Question

[Ilya Loopashko]

Мне нужно сделать валидацию формы.

1. При создании задачи, не менее 10 символов. Красный бордер.


2. При правильном, был зеленый


3. И что бы кнопка была не активна пока не введут корректное значение.


Тут Код jsfiddle

Answer 1

[0xD34F]

computed: {
  newTodoValid() {
    return this.newTodo.length >= 10;
  },
},

<input :class="newTodoValid ? 'valid' : 'not-valid'">
<button :disabled="!newTodoValid">

.valid {
  border: 2px solid green;
}

.not-valid {
  border: 2px solid red;
}

Comments

[Ilya Loopashko]

Работает, спасибо!!!

Answer 2

[olenkill2]

Если форм много, то советую использовать плагин vee-validate
Легкий, гибкий. В общем крутая штука. Но это если форм больше, чем одна)