同じvueJsコンポーネントへの複数の参照の使用方法は？

Question

私は、2つのvueJsコンポーネント：person-details.vueとphones.vueを含むPHPページperson.phpを持っています。これらのコンポーネントのそれぞれは、同じ第3のコンポーネントnotify-deleteを含みます。このnotify-deleteコンポーネントには、親コンポーネント（人または電話）の削除アクションを確認するためのブートストラップモーダルダイアログが含まれています。 propsを使用してモーダル確認ダイアログでメッセージを設定し、$refsを表示します。

問題：この小道具は、コンポーネントpersonからmsg小道具を設定され、ダイアログが表示されたら 、メッセージが正しく設定されています。しかし、phonesコンポーネントから設定すると、ダイアログにはpersonで設定されたメッセージが表示されます。あたかもpersonがmsg小道具の値を常に上書きしているかのように。ここ

はコードのサンプルです： person.php

：

<person-details details="<?= json_encode($person) ?>"></person-details> 
<phones details="<?= json_encode($phones) ?>"></phones> 

人-details.vue：

<template> 
    <notify-delete ref="modalDeletePerson" :entity="'person'" :msg="deleteMsg" @confirmed="deleteMe"></notify-delete> 
    <button type="button" @click="confirmDelete">Delete this person</button> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       deleteMsg: '' 
      } 
     }, 
     methods: { 
      confirmDelete() { 
       this.deleteMsg = 'Are you sure you want to delete this person?' 
       this.$refs.modalDeletePerson.show() 
      }, 
      deleteMe() { 
       // delete person 
      } 
     } 
    } 
</script> 
</template> 

Phones.vue：

<template> 
    <notify-delete ref="modalDeletePhone" :entity="'phone'" :msg="deleteMsg" @confirmed="deleteMe($event)"></notify-delete> 

    <button type="button" @click="confirmDelete">Delete this phone</button> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       deleteMsg: '' 
      } 
     }, 
     methods: { 
      confirmDelete() { 
       this.deleteMsg = 'Are you sure you want to delete this phone?' 
       this.$refs.modalDeletePhone.show() 
      }, 
      deleteMe() { 
       // delete phone 
      } 
     } 
    } 
</script> 

通知-delete.vue：

<template> 
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-body"> 
        {{msg}} 
       </div> 
       <div class="modal-footer"> 
        <button type="submit" data-dismiss="modal" @click="confirm">Delete</button> 
        <button type="button" data-dismiss="modal">Cancel</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 
<script> 
    export default { 
     props: ['entity', 'msg'], 

     methods: { 
      show() { 
       $('#modalDelete').modal('show') 
      }, 

      confirm() { 
       this.$emit('confirmed') 
      } 
     } 
    } 
</script> 

私は2つが同じコンポーネントのインスタンスを区別することができますどのように任意のアイデア？

Answer 1

問題はここにあなたがそれらを表示するためにjQueryを使用して、同じIDを持つ2個のモーダルをレンダリングしている

show() { 
    $('#modalDelete').modal('show') 
} 

です。具体的には、$('#modalDelete')には2つの要素が含まれます。私はmodalメソッドがちょうど最初のものを選んでそれを示すと思う。

これは、それが自身の参照ですNotify-delete.vueコンポーネントの各インスタンスを与える必要があります

<div ref="modal" class="modal fade" tabindex="-1" role="dialog"> 

と

show() { 
    $(this.$refs.modal).modal('show') 
} 

を試してみてください。