Компоненты админки: vesp-modal

Создание модели

<template>
  <!--Окну обязательно нужено передать данные и адрес для отправки-->
  <vesp-modal v-model="record" :url="url" :title="$t('models.user.title_one')">
    <!--Вставляем поля формы в соответствующий слот компонента-->
    <template #form-fields>
      <!--И синхронизируем данные между формой и модалкой-->
      <form-user v-model="record" />
    </template>
  </vesp-modal>
</template>

<script>
// Чтобы не дублировать адрес, импортируем его из страницы с таблицей
// Вдруг потом нужено будет его поменять? Проще это сделать в 1 месте
import {url} from '../users'
// Импортируем компонент с полями формы
import FormUser from '@/components/forms/user'

// Экспортируем url снова, для окна редактирования
export {url}
// Основной экспорт
export default {
  components: {FormUser},
  data() {
    return {
      // передаём url в template
      url,
      // и выставляем данные формы по умолчанию
      record: {
        fullname: '',
        password: '',
        active: true,
      },
    }
  },
}
</script>

<template>
  <div>
    <!--Я использую компоненты BootstrapVue, но вообще можно псиать обычные-->
    <!--div, input и прочие теги-->
    <b-row>
      <b-col md="6">
        <!--Названия полей мультиязычные по умолчанию-->
        <b-form-group :label="$t('models.user.username')">
          <!--Поля ввода редактируют присланные данные-->
          <b-form-input v-model.trim="record.username" required autofocus />
        </b-form-group>
      </b-col>
      <b-col md="6">
        ...
      </b-col>
    </b-row>
    <b-form-group :label="$t('models.user.fullname')">
      <b-form-input v-model.trim="record.fullname" required />
    </b-form-group>
   ...
  </div>
</template>

<script>
export default {
  name: 'FormUser',
  // Компонент принимает только один параметр - value
  props: {
    value: {
      type: Object,
      required: true,
    },
  },
  // И с помощью этого value мы создаём новый вычисляемый параметр
  computed: {
    // В эту логику сразу трудно въехать, смотрите ниже
    record: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      },
    },
  },
  ...
}
</script>

• Данные в модальном окне передаются через v-model, внутри компонент такие данные доступны как value. Это у Vue так придумано, нужно просто запомнить
• v-model всегда означает, что передаваемые данные должны быть реактивными, то есть когда они меняются внутри компонента, мы это видим снаружи.

async submit() {
  try {
    // Передаём данные в хук beforeSubmit - он должен проверить их перед отправкой
    // Перед этим убираем реактивность из данных, путём конвертации объекта в 
    // JSON и обратно
    const record = this.beforeSubmit(JSON.parse(JSON.stringify(this.record)))
    if (record) {
      // Если в ответ вместо массива пришла строка - это ошибка проверки, выводим её
      if (typeof record === 'string') {
        this.$toast.error(record)
      } else {
        // Ошибки нет, выставляем флаг загрузки
        this.loading = true
        // Определяем метод отправки: PATCH или PUT
        const method = record.id ? this.actionEdit : this.actionCreate
        const {data} = await this.$axios[method](this.url, record)
        // Даём событие об успешной отправке, на него можно подписаться
        this.$emit('after-submit', data)

        // И даём еще одно, глобальное событие - на него по умолчанию 
        // подписывается таблица с редактируемыми данными
        // Это даёт нам обновление таблицы моделей при работе с ними в модалке
        if (this.updateKey) {
          this.$root.$emit(`app::${this.updateKey}::update`, data)
        }
        // Закрываем окно
        this.hide()
      }
    }
  } catch (err) {
  } finally {
    this.loading = false
  }
},

Редактирование модели

<script>
// Загружаем страницу создания юзера и адрес для запросов из предыдущей модалки
import Create, {url} from '../create'

export default {
  // Указываем, что наш компонент раширяет родительский
  // То есть, он наследует всё, что прописано в UserCreate
  extends: Create,
  // Страница работает только если прислан id юзера
  validate({params}) {
    return /^\d+$/.test(params.id)
  },
  // Эта особенная функция загружает данные до создания компонента
  // и является особенностью Nuxt, как и метод validate
  async asyncData({app, params, error}) {
    try {
      // Получаем данные методом GET из контроллера
      const {data: record} = await app.$axios.get(url + '/' + params.id)
      // Возвращаем массив с данными, которые будут выставлены компоненту
      // Родительский компонент выставлял переменную record, её мы и заменяем
      return {record}
    } catch (e) {
      // Если данные не получаются - ошибка
      error({statusCode: e.statusCode, message: e.data})
    }
  },
}
</script>

record: {
  fullname: '',
  password: '',
  active: true,
},

Заключение