Le titre est réécrit comme suit : Résoudre le problème de rendu de largeur dynamique du composant RatingBar dans Vue.js 3 et Tailwind CSS

Question

J'utilise Vue.js 3 et Tailwind CSS. J'ai un composant appelé RatingBar et j'essaie d'appliquer une valeur de largeur dynamique à la classe de l'élément parent. Cependant, même si je peux voir la largeur attendue dans DevTools, le rendu est à 100 %.

Voici mon code dans le composant RatingBar.vue :

Answer 1

Selon Documentation :

À la place, vous pouvez utiliser style属性来设置width :

<div
  class="h-full rounded-lg bg-secondary"
  :style="{ width: `${Math.floor(genre.rating * 10)}%` }"
></div>