동일한 vueJs 구성 요소에 대한 여러 참조를 사용하는 방법은 무엇입니까?

나는 두 개의 vueJs 구성 요소 인 person-details.vue과 phones.vue을 포함하는 PHP 페이지 person.php을 가지고 있습니다. 이러한 각 구성 요소에는 동일한 세 번째 구성 요소 notify-delete이 포함됩니다. 이 notify-delete 구성 요소에는 부모 구성 요소 (사람 또는 전화)의 삭제 작업을 확인하기위한 부트 스트랩 모달 대화 상자가 포함되어 있습니다. props을 사용하여 모달 확인 대화 상자에 메시지를 설정하고 $refs을 표시합니다.동일한 vueJs 구성 요소에 대한 여러 참조를 사용하는 방법은 무엇입니까?

문제점이 소품이 성분 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>

나는 두 개의 동일한 구성 요소의 인스턴스를 구별 할 수 있습니다 방법 어떤 생각?

출처

2017-04-11 Warrio

템플릿에 'Person-details.vue'에 오타가 있습니까? 여기에 작성한대로 있습니까? – Bert

예, 추가 붙여 넣기가있었습니다. 고맙습니다. 나는 그것을 편집했다. – Warrio

문제는 여기에 당신은 다음을 보여 jQuery를 사용하여, 동일한 ID로 두 가지 조동사를 렌더링하는

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

입니다. 특히 $('#modalDelete')에는 두 개의 요소가 포함됩니다. modal 메서드는 첫 번째 메서드를 선택하여 보여줍니다.

는

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

이

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

및

가 Notify-delete.vue 구성 요소 그 자체 기준의 각 인스턴스를 제공해야보십시오.

출처

2017-04-11 18:28:00 Bert

매력처럼 작동합니다. 고마워요! – Warrio

동일한 vueJs 구성 요소에 대한 여러 참조를 사용하는 방법은 무엇입니까?

답변

관련 문제