쌤 도와주세요

미해결질문
쀼뷰 프로필

11:40 부터 진행하는 '폼의 바깥을 누르면 닫히는기능'을 하고 있는데요.. (제 코드에 오타가 있을까봐) AddCard.vue와 List.vue를 전부 복붙도 해봤습니다. 복붙을 해도 안된다면 어디에서 문제가 있는걸까요? 저것만 적으면 잘되던 Add Card도 펼쳐지지 않습니다 ㅠㅠ. 오류를 해결할수있는 방법을 알려주셨으면 합니다.

mounted() {
    this.setupClickOutside(this.$el)
  },
  methods: {
    setupClickOutside(el) {
      document.querySelector('body').addEventListener('click', e => {
        if (el.contains(e.target)) return 
        this.$emit('close')
      })
    }
  }
이희영 프로필
이희영 2019.08.27

저도 똑같은 문제를 겪었는데 강사님은 어떻게 되셨는지 모르겠지만 e.target이 add-card-btn이 되었을 때 el(여기서 add-card) 이 버튼을 포함하지 않고 있기 때문에 return되지 않고 그대로 진행이 되서 close이벤트가 발생되는 것 같습니다. 따라서 저는 저 조건문에 임시방편으로 e.target.className === "add-card-btn"일 때를 추가해줬는데 동작하고 있습니다. 그렇지만 강사님은 어떻게 되셨는지 궁금합니다 ㅠㅠ 

김정환 프로필
김정환 11달 전

올려 주신 정보만으로는 파악하기가 좀 어려운데요. 지금까지 작업하신 결과물을 올려 주시면 파악하는데 수월할 것 같습니다. (깃헙이나 링크 등등)

정진환 프로필
정진환 10달 전

Add a Card..버튼을 클릭 하면  AddCard 컴포넌트가 마운트되고  setupClickOutside(this.$el)이 실행되어 리스너등록이 되고  .add-card-btn (Add a Card버튼)을 누른 이벤트가 상위엘리먼트로 버블링됩니다. 그때  버튼보다 상위 엘리먼트에서 같은 이벤트가 일어나는데 이벤트.타켓을 넘겨받고 넘겨받은  버튼엘리먼트가 AddCard컴포넌트 외부에 있어 close가 에밋되버려 바로 닫혀버리는  것 같습니다.

버블링을 막아주셔서 

<a href @click.prevent.stop="isAddCard=trueclass="add-card-btn">&plus; Add a Card...</a>

이렇게 해결해 주시면 될 것같아요.

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스