"Bootsrap-Vue Modal의 숨기기 방법이 잘못되었습니다"

Question

입력 텍스트를 포함하는 간단한 bootstrap-vue 모달이 있습니다. Ok 버튼을 눌렀을 때 자동으로 닫히지 않기를 원하므로 "방지"를 사용합니다. 그런 다음 몇 가지 유효성 검사를 수행한 다음 "hide" 메서드를 사용하여 닫으려고 합니다. 하지만 나에게는 작동하지 않습니다. 이상한 점은 show 메소드가 완전히 잘 작동한다는 것입니다. 설명서를 확인했는데 오류가 발생한 위치를 찾을 수 없습니다. 그 시점에서 hide 메소드를 어떻게 작동하게 만들 수 있나요? 여기 내 코드가 있습니다.

<템플릿>
  <div>
    <b-버튼
      사이즈="sm"
      클래스="m-2"
      변형="기본"
      @click="grfGuardarBtnPredefAccions()"
      >Guardar 그래픽 개인화</b-버튼
    >

    <b-모달
      id="grfModalGuardar";
      ref="grfGuardarModal";
      title="삽입 번호"
      @ok.prevent="grfModalOk"
      @cancel="grfModalCancel"
    >
      <p>
        귀하의 개인 설정에 맞는 그래픽을 지정하십시오.
      </p>
      <b-양식 입력
        v-model="grfModalPersoName"
        placeholder="Escriba aquí ..."
      ></b-form-input>
    </b-모달>
  </div>
</템플릿>

<스크립트>
기본값 내보내기 {
  이름: "GrafTopMenu",
  구성요소: {
    그라프에디터,
  },
  데이터() {
    반품 {
      // 저장할 사용자 정의 그래프에 사용자가 부여한 이름을 저장합니다.
      grfModalPersoName: "",
    };
  },
  계산됨: {},
  방법: {
    /**사용자 정의 그래프 저장 버튼으로 수행되는 작업*/
    grfSaveBtnPredefActions() {
      let errormsg = ""

      if (this.grfTableGrafica.tableConf.items.length == 0) {
        errormsg += errormsg + "빈 그래프를 저장할 수 없습니다"
      }

      if (!errormsg) {
        this.$refs.grfSaveModal.show();
      } 또 다른 {
        GeneralUtils.makeToast(
          "위험",
          3000,
          "빈 그래프는 저장할 수 없습니다."
        );
      }
    },

    grfModalOk() {
      if (!this.grfModalPersoName.trim()) {
        GeneralUtils.makeToast(
          "위험",
          3000,
          "이름은 비워둘 수 없습니다."
        );
      } 또 다른 {
        console.log("확인");
        console.log("this.grfModalPersoName :>> ", this.grfModalPersoName);
        console.log("this.grfTableGrafica", this.grfTableGrafica);
        this.$refs["grfSaveModal"].hide();
        // this.$refs.grfSaveModal.hide();
      }
    },

    grfModalCancel() {
      this.grfModalPersoName = "";;
    },
  },
};
</스크립트>

<스타일>
</스타일>

내가 좋아하는 말:

        this.$refs.grfSaveModal.hide();
        this.$refs['grfSaveModal'].hide();
        this.$bvModal.hide('grfSaveModal');

Answer 1

편집: v-model을 사용하셨나요? 데이터를 v-model에 전달하고 필요한 경우 업데이트하세요

다른 옵션이 있습니다.

으아악

또는 v-model 속성을 사용하여 Bootstrap Vue 모달 상자를 제어할 수 있습니다.

문서를 확인하세요.

Answer 2

문제는 닫히지 못하게 하면서 동시에 닫으려고 한다는 것입니다.

this.$nextTick를 사용하여 숨겨진 방법을 다음 순간까지 연기하면 이 문제를 해결할 수 있습니다.

으아악