본문 바로가기
VueJS/VueJS

[VueJS] vue If you are using v-if on multiple elements, use v-else-if to chain them instead. error

by 썸머워즈 2020. 10. 31.
반응형

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>태그를 감싸주어 해결하였다.

사실 처음 접할때만 겪는 에러고 그 이후로는 잘 볼 수 없는 에러이다.

반응형


댓글

TOP