Компонент не работает должным образом при импорте внутри модального окна - PullRequest
Новая
       0

Компонент не работает должным образом при импорте внутри модального окна

0 голосов
/ 08 мая 2020

Итак, у моего проекта есть представление с компонентом формы. Этот вид используется для вставки / редактирования пациентов. Компонент формы работает нормально при использовании его в представлении, но, когда форма импортируется внутри внешнего модального окна, все работает неправильно. Внутри формы у меня есть вычисляемое свойство, которое возвращается, если на входе есть содержимое или нет. Это свойство отлично работает в представлении, но в модальном, по-видимому, не пересчитывается.

Модальный код: 

<template>
  <uni-modal
    close-esc
    visible-overflow
    size="custom"
    :version="2"
    :show="showModal"
    @close="onClose"
  >
    <template slot="header">
      Cadastrar paciente
    </template>
    <paciente-form
      is-modal
      v-if="showModal"
      @on-close="onClose"
      @save="onSave"
      @save-from-beneficiario="onSaveFromBeneficiario"
    />
  </uni-modal>
</template>

<script>
import PacienteForm from '@/views/paciente/dashboard/edit/form';
// More code...
</script>

Код формы: 

export default {
  // ...
  data: () => ({
     formValues: {
      // ...
      pacienteConvenios: [
        { convenio: null, numeroCartao: null, isUsado: false },
      ],
    },
    rules: {
      // ...
      numeroCartao: 'min:17', // Rule don't working on modal
      // ...
    },
  }),
  // ...
  computed: {
    // ...
    canSave() {
      return !(this.cepInvalido || this.dataInvalida || this.hasConvenioEmpty);
    },
    
    isConvenioParticular() {
      return ({ convenio }) => !!convenio?.convenioParticular;
    },
    
    hasConvenioEmpty() {
      const { pacienteConvenios } = this.formValues;
      return pacienteConvenios
        .filter(({ convenio }) => !convenio?.convenioParticular)
        .some(convenio => !convenio?.numeroCartao);
    },
    // ...
  }
}
<template>
  <!-- More code above -->
  <uni-row v-if="isModal">
    <uni-select
      searchable
      class="is-4"
      label="nome"
      name="convenio"
      title="Convênio"
      placeholder="Selecione"
      v-model="formValues.pacienteConvenios[0].convenio"
      :options="optionsConvenio"
    />
    <div>
      <uni-label
        title="Número da carteira"
        :required="!isConvenioParticular(formValues.pacienteConvenios[0])" # Dont working on modal
      />
      <uni-input
        placeholder="Digite o código"
        name="numeroCartao" # Validation dont working on modal
        v-model="formValues.pacienteConvenios[0].numeroCartao"
        mask="00000000000000000"
        :disabled="formValues.pacienteConvenios[0] && isConvenioParticular(formValues.pacienteConvenios[0])" # Dont working on modal
        @blur="searchBeneficiarioByCartao"
      />
    </div>
  </uni-row>
  <!-- More code bellow -->
  <!-- ... -->
  <!-- More code above -->
  <uni-row class="margin-top-30 button-row">
    <uni-button
      class="is-primary margin-top-15 margin-right-20"
      type="submit"
      :disabled="!canSave" # Dont working on modal
    >
      Salvar
    </uni-button>
    <a class="has-text-grey margin-top-23" @click="$refs.cancel.open()">
      Cancelar
    </a>
  </uni-row>
  <!-- More code bellow -->
</template>
...