javascript - 在模态中导入时组件无法正常工作

Question

所以，我的项目有一个带有表单组件的视图。该视图用于插入/编辑患者。表单组件在视图中使用时可以正常工作，但是，当在外部模式中导入表单时，事情就无法正常工作。在表单内部，我有一个计算属性，如果输入有内容则返回。该属性在视图上工作正常，但在模态上显然没有重新计算。

模态代码：

<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>

标签： javascriptvue.jsvue-component