CODEWITHSUNDEEP
javascriptlaravelvue.jsinertiajs
Jarliev Pérez
Jarliev Pérez

Reputation: 263

Inertia.js Vue JS Printing prop value as style

I have the following inertia link component

<inertia-link v-for="project in $page.props.user.favorite_projects" :key="project.id" class="flex items-center px-6 py-2 mb-1 text-sm leading-6 text-gray-300 transition duration-150 ease-in-out group focus:outline-none focus:bg-gray-700 hover:text-white hover:bg-gray-700" :href="route('projects.show',project.slug)">
     <div class="w-3 h-3 mr-3 overflow-hidden rounded-full">
        <div class="w-full h-full" style="background-color = {{ project.color }};">
        </div>
     </div>
     {{ project.project_name }}
</inertia-link>

Where project.color contains a hex color value like #fc8181, which is used to color the element based on the project.

However, the circle with this color value is not being shown in the dom. Is there a way to display the project color as background color?

Upvotes: 0

Views: 481

Answers (1)

Juan Eizmendi
Juan Eizmendi

Reputation: 1134

you need to bind the style, try style

:style="{ background-color: project.color }"

Upvotes: 2

Related Questions