[일상] Vue 인스턴스가 제대로 작동하지 않던 현상.. ( 제대로 확인을 하도록 하자.. )

 

 

 

이번에 옆팀에서 Vue 인스턴스가 제대로 작동이 안된다고 해서 같이 봤는데 한시간 정도 봤는데도 이해가 되지 않았다.
분명 뷰인스턴스 객체 생성됬고 노드에 부착까지 잘 되었는데 data나 method가 호출되지 않는 상황..

그래서 선임에게 help를 쳐서 보니 해당 노드의 id값이 같은게 2개 있는것 이었다.

당연한 이야기이지만 el태그로 id값을 잡아서 뷰 객체를 만드는데 id가 2개 있으면 안된다.
너무 기본적인 걸 확인 하지 않았었다..

View단에서 해당 id를 검색했을 때, 1개만 나오더라도 어디선가 해당 id값을 가진 노드를 그려줄 수도 있기 때문에
코드단만 확인할 게 아니라, 실제 랜더링 된 소스를 확인 하도록 하자.

개발자도구를 열어서 해당 id가 제대로 생성되었는지, 아니면 중복으로 생성되었는지 확인하도록 하자.

단 제이쿼리를 이용하면 무조건 첫번째 값만을 가져오기 때문에 그냥 콘솔에 id값을 입력해서 보도록 하자~

 

이런식으로 id는 콘솔에 찍기만 하면 해당 소스에 id가 존재 하는지, 몇개 존재하는지까지 배열 형태로 떨어지니
확인해보도록 하자..