vueインスタンス外で定義されたモーダルの場合、ブートストラップモーダルが機能しない

Question

vueインスタンス内からブートストラップモーダルをオープンしようとしています。

この関数は、関数内でモーダル要素を見つけると機能します。しかし、インスタンス外または変数データオブジェクト内の変数としてモーダル要素を宣言すると、モーダルが破損します（バックグラウンドは表示されますが、モーダルは表示されません）。私は、問題を表示するためにjsfiddleを作成している

let modalElement = $('#myModal'); 

const app = new Vue({ 
    el: '#app', 
    data: { 
    'modal': $('#myModal') 
    }, 
    methods: { 
    makeNormalModal() { 
     let element = $(event.target); 
     $('#myModal').modal('show'); 
    }, 
    makeBrokenModal() { 
     this.modal.modal('show'); 
    } 
    } 
}); 

：

<div id="app"> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
      ... 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div> 
    </div> 
    </div> 

    <button class="btn btn-default" data-target="#myModal" @click="makeNormalModal">Normal Modal</button> 
    <button class="btn btn-danger" data-target="#myModal" @click="makeBrokenModal">Broken Modal</button> 
</div> 

とJavaScript：

は、ここに私のコードです。 $refsプロパティを使用して、次にアクセスして

<div class="modal fade" id="myModal" ref="modal"> 

：

Answer 1

あなたがref属性を使用することができ

$(this.$refs.modal).modal('show'); 

更新フィドル：https://jsfiddle.net/ukmnc4gs/4/

Answer 2

代わりの$（ '＃のmyModal'） dataオブジェクト内に「#myModal」を設定します。

const app = new Vue({ 
    el: '#app', 
    data: { 
    'modal': '#myModal' 
    }, 
    methods: { 
     makeBrokenModal(event) { 
     $(this.modal).modal('show') 
     } 
    } 
});