Inertia.js Vue JS 打印属性值作为样式

Question

我有以下惯性link分量

<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>

其中project.color包含一个十六进制颜色值，如#fc8181，用于根据项目为元素着色。

但是，dom 中未显示具有此颜色值的圆圈。有没有办法将项目颜色显示为背景颜色？

Answer 1

需要绑定样式，试试style

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

Inertia.js Vue JS 打印属性值作为样式

Inertia.js Vue JS Printing prop value as style

javascript

inertiajs

laravel

vue.js