[Vue] Component template should contain exactly one root element. 에러

오늘 뷰 컴포넌트를 이용해서 검색기능을 만들고 있는데 다음과 같은데 에러가 떴다. 

Component template should contain exactly one root element.

위 에러를 단순히 풀면 root는 하나여야 하는데, 현재 코드는 그렇지 않다는 것이다.

우선 내가 작성한 코드는 아래와 같다.

 

보통 template를 작성할때는 태그들을 하나씩만 적는데, 나는 여러 태그를 한번에 넣고 싶었다.. 

"검색기능"에는 크게 3가지 기능이 있는데, 각각 컴포넌트들을 만들어 주기 싫었기 때문..

 

그래서 3개의 기능을 template에 그대로 넣었고, 덕분에 에러가 뜬 것이다.. root는 하나여야만 하는데

3개나 되니, 규칙을 위반했다는 것. 결론은..

<div> 로 묶어주면 간단히 해결!!

 

기존에 있던 코드를 그대로 갖다 써서, <div>로 묶어 줄 생각을 못했다. 다음부터는 이런 실수를 하지 않도록...