vue js関数をjqueryに動的に追加する方法

Question

私は再利用可能なブートストラップモーダルを使用しています。つまり、編集、削除操作には同じモーダルです。

編集ボタンまたは更新ボタンをクリックすると、同じモーダルがポップアップし、モーダルフッターボタンに適切な機能を追加する必要があります。編集ボタンをクリックすると

マイフッターボタンがあまりにも削除アクションについても同様に

$(document).on('click', '.edit-modal', function() { 
     $('#footer_action_button').text(" Update"); 
     $('#footer_action_button').addClass('glyphicon-check'); 
     $('#footer_action_button').removeClass('glyphicon-trash'); 
     $('.actionBtn').addClass('btn-success'); 
     ..... 
     ...... 
     $('#myModal').modal('show'); 
     $('.actionBtn').click(updateOperation); 
    }); 

、

<div class="modal-footer"> 
    <button class="btn actionBtn" data-dismiss="modal"> 
    <span id="footer_action_button" class='glyphicon'> </span> 
    </button> 
    <button class="btn btn-warning" data-dismiss="modal"> 
    <span class='glyphicon glyphicon-remove'></span> Close 
    </button> 
</div> 

、のようなものです。..ここ

$('.actionBtn').click(updateOperation);はnormalllyうまくいくでしょう。

が、ここでupdateOperationは、私は、この更新操作を呼び出すことができません、

methods: { 
      updateOperation: function() { 
      ..... 
      ..... 
     }, 
    } 

vueJs機能です。

静的に@click="updateOperation()"を追加すると、正常に動作します。

<button class="btn actionBtn" data-dismiss="modal" 
@click="updateOperation()">    
    <span id="footer_action_button" class='glyphicon'> </span> 
</button> 

Answer 1

私は非常にあなたの質問を理解することはわからないんだけど、ここで私はそれをやった方法です：

私はモーダル・コンポーネントを持っている：

Modal.vue：

<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" @click="close()"> 
      <span aria-hidden="true">×</span> 
     </button> 
     <h4 class="modal-title"> 
      {{ title }} 
     </h4> 
    </div> 
    <div class="modal-body"> 
     <slot></slot> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" @click="close()">Fermer</button> 
     <button type="button" class="btn btn-primary" @click="save()" :disabled="loading"><i class="fa fa-spin fa-spinner" v-if="loading"></i>Confirmer</button> 
    </div> 
</div> 

そして：

export default { 
    props: ['title','save','close','loading'] 
} 

ご覧のとおり、私はModalコンポーネントの引数にsaveとcloseメソッドを取ります。

その後、私は別のものからコンポーネントを呼び出すとき、私はパラメータとしてメソッドを送信します。

Parent.vue：

<modal v-show="showModal" title="Ajouter une adresse" :save="saveAddress" :close="hideModal" :loading="savingNewAddress"> 
    My Modal content here 
</modal> 

export default { 
    data() { 
     return { 
      this.showModal = false; 
     } 
    }, 
    methods: { 
     saveAddress() { 
      console.log('fired from my parent component'); 
     }, 
     hideModal() { 
      this.showModal = false; 
     }, 
     displayModal() { 
      this.showModal = true; 
     } 
    }, 
    components: { 
     Modal 
    } 
} 

私はこれが役に立てば幸い！