Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

faxunil's avatar

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

0 likes
3 replies
SilenceBringer's avatar
Level 55

@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

3 likes

Please or to participate in this conversation.