Как передать элементы ввода формы через слоты с заданной областью в дочерний компонент - PullRequest
Новая
       65

Как передать элементы ввода формы через слоты с заданной областью в дочерний компонент

2 голосов
/ 14 июля 2020

Как мне получить доступ к данным, введенным в мои элементы ввода, которые передаются через слот, моему дочернему компоненту, который открывает модальное окно с элементами формы внутри него?

Я был читая vue документы о слотах с ограниченным объемом, но, честно говоря, я просто не могу понять, как заставить его работать в моем примере. Ни в одном из примеров не используется элемент ввода с v-моделью, который передается дочернему компоненту.

Я создал компонент «BaseFormModal», который содержит следующий код: Обратите внимание, что проверка (vee -validate) происходит здесь, поэтому этот дочерний компонент генерирует событие «submit», когда данные считаются действительными, которые я затем забираю в своем родительском компоненте. 

<template v-slot:default="slotProps">
  <b-modal ref="base-form-modal" :title="title" :no-close-on-backdrop="true" @ok.prevent="onSubmit">
    <validation-observer ref="observer" v-slot="{handleSubmit}">
      <b-form ref="form" @submit.stop.prevent="handleSubmit(onSubmit)">
        <slot />
      </b-form>
    </validation-observer>
  </b-modal>
</template>

<script>
import { ValidationObserver } from 'vee-validate'

export default {
  name: 'BaseFormModal',
  components: {
    ValidationObserver,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      formData: {},
    }
  },
  methods: {
    async onSubmit () {
      let valid = await this.$refs.observer.validate()
      if (!valid) {
        return
      }
      this.$emit('submit', this.formData)
      this.$nextTick(() => {
        this.$refs['base-form-modal'].hide()
      })
      this.formData = {}
    },
    showModal () {
      this.$refs['base-form-modal'].show()
    },
  },
}
</script>

<style lang="scss" scoped>

</style>

На моей странице у меня есть кнопка, которая открывает модальное окно, например: 

<b-button variant="primary" @click="$refs['addOrgUserModal'].showModal()">
    <i class="far fa-plus" aria-hidden="true" /> {{ $t('organisation_settings_manage_users_add_user') }}
</b-button>

Затем я определил модальный компонент базовой формы на своей странице следующим образом: 

<base-form-modal
  ref="addOrgUserModal"
  :title="$tU('organisation_settings_manage_users_add_user_modal_title')"
  @submit="addOrgUser"
>
  <b-row>
    <b-col md="6">
      <form-control-wrapper :rules="{required: true}" :label="$tU('first_name_label')">
        <b-form-input
          v-model="user.firstName"
          type="text"
          lazy-formatter
          :formatter="trimSpaces"
          :placeholder="$t('first_name_field_placeholder')"
        />
      </form-control-wrapper>
    </b-col>
    <b-col md="6">
      <form-control-wrapper :rules="{required: true}" :label="$tU('family_name_label')">
        <b-form-input
          v-model="user.familyName"
          type="text"
          lazy-formatter
          :formatter="trimSpaces"
          :placeholder="$t('family_name_field_placeholder')"
        />
      </form-control-wrapper>
    </b-col>
  </b-row>
</base-form-modal>
...