반응형
Vue component를 처음 사용하다 보면 한번쯤은 겪을 수 있는 에러인데 발생한 에러는 다음과 같다.
▷ 에러
vue If you are using v-if on multiple elements, use v-else-if to chain them instead. error
에러가 말하고자 하는것은 "여러 개의 태그를 최상위 레벨로 동시에 위치시킬 수 없다." 라는 의미라고 보면 된다.
이게 무슨 의미인가 하면 직접 예제 코드를 통해 확인해보자.
▷ 예제1) 에러발생 코드
Vue.component('modal-test',{
template: '<button v-on:click="show()">테스트</button><modal name="test">test</modal>'
,methods:{
show:function(){
this.$modal.show("test");
}
}
});
이 component를 사용해 보자.
<modal-map></modal-map>
이렇게 사용하게 되면 위에서 다룬 에러가 발생하는데 저 component를 풀어보면
<modal-map>
<button v-on:click="show()">테스트</button>
<modal name="test">test</modal>
</modal-map>Vue를 사용할때도 최상위 요소를 가지고 그 안의 요소를 제어하는데,
component 역시 여러개가 아닌 하나의 최상위 요소가 필요하다.
이제 에러의 원인을 알았으니 해결 방법은 간단하다.
▷ 예제2) 에러발생 해결 코드
Vue.component('modal-test',{
template: '<div><button v-on:click="show()">테스트</button><modal name="test">test</modal><div>'
,methods:{
show:function(){
this.$modal.show("test");
}
}
});
최상위 요소로 <div>태그를 감싸주어 해결하였다.
사실 처음 접할때만 겪는 에러고 그 이후로는 잘 볼 수 없는 에러이다.
반응형
댓글