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
<p>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 %. </p>
<p>Voici mon code dans le composant RatingBar.vue : </p>
<pre class="brush:js;toolbar:false;"><template>
<div class="ma-2 grille grille-cols-3 éléments-centre">
<span class="text-left text-sm">{{ genre.name }}</span>
<div class="h-2 flex-1 arrondi-lg bg-gray-800">
<div
class = "h-full arrondi-lg bg-secondaire"
:class="`w-[${Math.floor(genre.rating * 10)}%]`"
></div>
</div>
<div class="ml-2 flex flex-row items-center gap-1 text-sm text-gray-600">
<i class="fa-regular fa-star"></i>
<span class="flex flex-row gap-1">
<envergure>
{{ genre.rating }}
</envergure>
<span> ({{ genre.count }}) </span>
</envergure>
</div>
</div>
</modèle>
<configuration du script>
const props = définirProps({
genre: {
tapez: Objet,
requis : vrai,
},
})
</script>
≪/pré>
<p>La sortie HTML rendue s'affiche en <div> avec une largeur <code>w-[75%]</code> : </p>
<pre class="brush:html;toolbar:false;"><div class="h-full arrondi-lg bg-secondary w-[75%]"></div>
≪/pré>
<p>这是我的package.json文件：</p>
<pre class="brush:json;toolbar:false;">{
"nom": "nom_projet",
"version": "0.0.0",
"privé" : vrai,
"scripts" : {
"dev": "vite",
"build": "vite build",
"aperçu" : "aperçu rapide"
},
"dépendances" : {
"axios": "^1.4.0",
"firebase": "^9.22.1",
"vue": "^3.3.2",
"vue-router": "^4.2.0"
},
"Dépendances dev" : {
"@vitejs/plugin-vue" : "^4.2.3",
"préfixeur automatique": "^10.4.14",
"postcss": "^8.4.23",
"plus joli": "^2.8.8",
"plus joli-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "^3.3.2",
"vite": "^4.3.5"
}
}
≪/pré>
<p>请问您能帮我解决这个问题吗？</p>
<p>时，使用表达式<code>:class="w-[${Math .floor(genre.rating * 10)}%]"</code>，渲染结果并不如预期。它总是渲染为宽度为100%，而不是应用计算得到的宽度。</p>
<p>宽度应该是75%。</p>
<p>值如何。</p>
<p>议。</p>
