Tajuk ditulis semula sebagai: Menyelesaikan masalah pemaparan lebar dinamik komponen RatingBar dalam Vue.js 3 dan Tailwind CSS
<p>Saya menggunakan Vue.js 3 dan Tailwind CSS. Saya mempunyai komponen yang dipanggil RatingBar dan saya cuba menggunakan nilai lebar dinamik pada kelas elemen induk. Walau bagaimanapun, walaupun saya dapat melihat lebar yang dijangkakan dalam DevTools, ia menghasilkan pada 100%. </p>
<p>Ini ialah kod saya dalam komponen RatingBar.vue: </p>
<pre class="brush:js;toolbar:false;"><template>
<div class="my-2 grid-cols-3 item-center">
<span class="text-left text-sm">{{ genre.name }}</span>
<kelas div="h-2 flex-1 bulat-lg bg-kelabu-800">
<div
class="h-penuh bulat-lg bg-menengah"
:class="`w-[${Math.floor(genre.rating * 10)}%]`"
></div>
</div>
<div class="ml-2 item baris lentur-lentur-jurang tengah-1 teks-sm teks-kelabu-600">
<i class="fa-star biasa"></i>
<span class="flex flex-row celah-1">
<span>
{{ genre.rating }}
</span>
<span> ({{ genre.count }}) </span>
</span>
</div>
</div>
</template>
<persediaan skrip>
const props = defineProps({
genre: {
jenis: Objek,
dikehendaki: benar,
},
})
</skrip>
</pra>
<p>Paparan output HTML dalam <div> dengan lebar <kod>w-[75%]</code>: </p>
<pre class="brush:html;toolbar:false;"><div class="h-penuh bulat-lg bg-menengah w-[75%]"></div>
</pra>
<p>这是我的package.json文件：</p>
<pre class="brush:json;toolbar:false;">{
"nama": "nama_projek",
"versi": "0.0.0",
"peribadi": benar,
"skrip": {
"dev": "undang",
"bina": "undang bina",
"pratonton": "pratonton jemputan"
},
"kebergantungan": {
"axios": "^1.4.0",
"firebase": "^9.22.1",
"vue": "^3.3.2",
"vue-router": "^4.2.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"autopfixer": "^10.4.14",
"postcss": "^8.4.23",
"lebih cantik": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "^3.3.2",
"mengundang": "^4.3.5"
}
}
</pra>
<p>请问您能帮我解决这个问题吗？</p>
<p>我尝试在RatingBar组件中使用静态值作为宽度，它正确渲染。然而，当我尝态值作为宽度，它正确渲染。然而，当我尝而当我尝态度作为宽度，它正确渲染。然而，当我尝而当我尝為度何住时，使用表达式<kod>:class="w-[${Math .floor(genre.rating * 10)}%]"</code>，渲染结果并不如预期。它总是渲染为宽度为100%，而度管宽度。</p>
<p>我期望具有bg-secondary类的div元素的宽度与基于genre.rating值计算的百分比相对应。例如，5例如，5例如，5例如，5例如，5例如，5例如，5例如，度店该是75%。</p>
<p>尽管在DevTools中验证了宽度值，但渲染的HTML输出始终将宽度显示为100%，而得不管如何。</p>
<p>我将非常感谢您对如何解决此问题并使RatingBar组件中的动态宽度正确宽度正确宽度正确渲染的记仁渲染。 /p>
