VueCompilerError: v-html will override element children. Hi!
I would like to show img tag - comes from Laravrel API as reponsive img set - into a grid.
It works fine, but i have this strange error
VueCompilerError: v-html will override element children.
The images are rendered dispite of this error.
How I could eliminate this?
Thanks
Gergely
<div v-html="category.category_image"
class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
{{ category.category_image }}
</div>
<h3 class="mt-4 text-sm text-gray-700">
{{ category.category_name }}
</h3>
</a>
v-html will override element children.
at /Users/gergelymac/gitrepos/beautyguide/resources/js/components/components/ListOfCategories.vue:8:27
6 | <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
7 | <a v-for="category in categories" :key="category.id" :href="category.category_slug" class="group">
8 | <div v-html="category.category_image"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 | class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
10 | {{ category.category_image }}
webpack compiled with 1 error
@faxunil you have v-html here
<div v-html="category.category_image"
class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
but next you put some content
{{ category.category_image }}
and error says - content will be overwritten.
Just remove everything inside this div
<div v-html="category.category_image"
and problem will gone
@SilenceBringer You must also remove the comments. I was getting an error due to this:
Please sign in or create an account to participate in this conversation.