태그 바인딩 에러로 인한 대처법

크롬에서는 매우 잘 돌아가나, IE시리즈에서는 template가 제대로 동작하지 않는듯하다.

그 이유를 찾아보려 했으나 실패했고, 임시 방편으로 피하고자 하는 간단한 방법을 소개하고자 한다.

우선 Crocus 블로그에서는 mainPage(www.crocus.co.kr/)일때 메인페이지 관련된 내용을 보여주고

mainPage가 아닐때 게시물들을 보여준다.

이때 IE에서 Id 바인딩이 제대로 됐다면 그냥 진행하면 되는데 어떤 이유는지는 모르겠으나 제대로 되지 않았고 따라서 다른 편법을 살짝 이용하였다.

 if (window.location.pathname == '/') { document.write('<style>.main-on{display:"" !important;} </style>'); }

window.location.pathname가 '/'일때 즉 root가 되므로 이때는 main-on이라는 class가 display: none이 아닌 display: ""로 설정하고 이 부분을 !important를 통해 우선순위를 최상으로 당겨준다.

처음에는 crocus 블로그가 모든것을 보여주고 hiding하는 방식이었는데 

우선은 보여주지 않고 해당하는 루트를 판변하여 순차적으로 보여주도록 하면 vue JS가 제대로 동작하지 않는 오류를 막을 수 있다.

참고로 display:none는 해당 아이디의 내용이 보이지 않도록하는 것인데 이 반대의 속성값이 존재하지 않는다.

따라서 display: ""로 설정하면 된다.