[Vue] vue/no-v-text-v-html-on-component 오류 해결

Vue2에서 eslint-plugin-vue를 사용한다면, 하위 컴포넌트의 slot에 v-text 또는 v-html을 전달하여 사용할 때 간혹 아래와 같은 오류가 발생한다.

 

vue/no-v-text-v-html-on-component error

 

원인은 아래 코드와 같이 하위 컴포넌트를 사용하며 v-text를 속성으로 전달하여 사용하도록 작성된 것이다.

<child-component v-text="ABC" />

 

v-text를 속성으로 전달할 경우, 하위 컴포넌트의 콘텐츠를 덮어쓰기 하며 컴포넌트가 정상적으로 동작하지 않을 수 있기 때문에 eslint-plugin-vue에서 error 로 표시한다.

 

해결 방법은 v-text를 하위 컴포넌트 내부에 div 태그나 p 태그로 전달하면 된다.

<child-component>
	<div v-text="ABC"/>
</child-component>

 

 

다른 방법으로는 eslint에서 특정 라인을 검사하지 않도록 처리하는 방법이 있으나, 추천하진 않는다.

<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
<child-component v-text="ABC" />

 

해당 오류를 수정하기 위해서 아래 사이트를 참고하였다.

https://eslint.vuejs.org/rules/no-v-text-v-html-on-component.html

vue/no-v-text-v-html-on-component | eslint-plugin-vue

https://stackoverflow.com/questions/75698069/disable-eslint-error-with-vuejs-and-v-html

Disable eslint error with Vuejs and v-html