두 번째 클릭 후에만 모달 표시

두 번째 클릭 후에만 모달 표시

vue2에서 1개의 구성 요소 = 1개의 파일 스타일로 개발 중입니다.

Bootstrap-Vue 테이블 컴포넌트를 통해 테이블을 구성하고 있으며 프로바이더를 사용하여 항목을 전달하고 있습니다.

열에 각 행의 수정 버튼이 포함되어 있습니다.

이러한 버튼은 부트스트랩모달을 트리거합니다.

테이블과 속성을 초기화하기 위해 V-if를 사용하고 있습니다.

<b-modal  v-if='toShow' id="modalallergy" @hide="resetModal">
      <h4 class="my-1 py-1" slot="modal-header">Allergie {{ modalDetails._id }}</h4>
      <b-container class="bv-example-row">
            <b-row>
                <b-col>
                  identifiant : {{modalDetails.data.content}}
                </b-col>
                <b-col>
                Catégorie : {{modalDetails.data.content}}
                </b-col>
            </b-row>
            </b-container>
    </b-modal>

    <b-modal id="modalallergy-edit" @hide="resetModal">
      <h4 class="my-1 py-1" slot="modal-header">Edition de l'allergie {{ modalDetails._id }}</h4>
      <pre>{{ modalDetails.data}}</pre>
    </b-modal>

이것은 나의 모달이고 바로 위에는 내 버튼이 있다.

<button class="btn btn-xs btn-success" @click.stop="details(row.item,row.index,$event.target)">
        <span class="glyphicon glyphicon-search"></span>
      </button>

이하에 있는<script>그리고.methods전화할 곳이 있습니다.

details (item, index, button) {
  this.modalDetails.data = item
  this.modalDetails.index = index
  this.modalDetails._id = item.content._id
  this.$root.$emit('bv::show::modal', 'modalallergy', button)
}

문제는 버튼을 두 번 클릭하는 것만으로 모달 오픈이 트리거된다는 것입니다.(테이블의 속성은 아직 수분 공급되지 않았습니다. 적어도 버튼과 모달의 관점에서는 그렇지 않습니다.)

Boolean을 사용하여 수동으로 Params를 전달하려고 했지만 전혀 열리지 않습니다.

당신은 그 문제를 풀었어야 했지만, 앞으로의 시도를 위해 그것은 제 의견입니다.저도 비슷한 문제가 있었어요.제 경우, 모듈 내의 컴포넌트를 초기화하는 데 사용되는 v-if가 문제였습니다.v-if를 h4로 변경하면 b-container 태그가 작동합니다.

사용해주실 수 있나요?v-on:click="details(row.item,row.index,$event.target)"대신@click.stop="details(row.item,row.index,$event.target)"그렇지 않으면 모든 것이 끔찍하게 잘못되어 버린다:)

코드를 확인하세요.잘은 모르겠지만 시도해 보세요.

details (item, index, button) {
  this.modalDetails.data = item
  this.modalDetails.index = index
  this.modalDetails._id = item.content._id
  this.$root.$emit('bv::show::modal', 'modalallergy', button)
  this.$root.$emit('bv::show::modal', 'modalallergy', button)
}

지연을 사용하여 간단한 회피책을 실행할 수 있습니다.

this.myVar = someThing;
setTimeout(function() {
  $('#mymodal').modal('show');
}, 100);

언급URL : https://stackoverflow.com/questions/47328857/modal-only-showing-after-the-second-click