Валидация форм с vue.js – делаем удобнее форму редактирования

Элементарная форма редактирования. Что мы хотим сделать? Мы хотим возвращать полю его изначальное значение при нажатии клавиши ESC и при потере полем фокуса, если оно пустое. Так что для начала нам нужно куда-то сохранить эти самые изначальные значения. Для этого добавим в data объект backup, в который при загрузке компонента будем сохранять копию данных, полученных с сервера:

export default {  data() {    return {      user: {        name: '',        email: ''      },      backup: {}    }  },  mounted() {    this.user.name = 'John';    this.user.email = 'john@test.com';    this.backup = { ...this.user };  }};

Теперь напишем метод для восстановления изначального значения поля:

restoreField(value, field) {  this.user[field] = this.backup[field];}

И метод для проверки пустое поле или нет:

checkEmpty(value, field) {  if (!value.trim()) {    this.restoreField(value, field)  }}

Добавим эти методы к полям формы и вот финальный результат:

<template>  <div id="app">    <form>      <div class="form__row">        <label for="name">Name</label>        <input type="text" name="name" id="name" class="form__control" v-model="user.name" @keydown.esc="restoreField(user.name, 'name')" @change="checkEmpty(user.name, 'name')">      </div>      <div class="form__row">        <label for="email">Email</label>        <input type="email" name="email" id="email" class="form__control" v-model="user.email" @keydown.esc="restoreField(user.email, 'email')" @change="checkEmpty(user.email, 'email')">      </div>    </form>  </div></template><script>export default {  data() {    return {      user: {        name: '',        email: ''      },      backup: {}    }  },  mounted() {    this.user.name = 'John';    this.user.email = 'john@test.com';    this.backup = { ...this.user };  },  methods: {    restoreField(value, field) {      this.user[field] = this.backup[field];    },    checkEmpty(value, field) {      if (!value.trim()) {        this.restoreField(value, field)      }    }  }};</script>

Совсем немного кода, но форма редактирования, как мне кажется, стала немного удобней и, что главное, она стала более дружелюбной.