<p>我正在使用Vue.js 3和Tailwind CSS。我有一個名為RatingBar的元件，我試著將動態寬度值套用到父元素的class。然而，儘管我在DevTools中可以看到期望的寬度，但它渲染為100%。 </p>
<p>這是我在RatingBar.vue元件中的程式碼：</p>
<pre class="brush:js;toolbar:false;"><template>
<div class="my-2 grid grid-cols-3 items-center">
<span class="text-left text-sm">{{ genre.name }}</span>
<div class="h-2 flex-1 rounded-lg bg-gray-800">
<div
class="h-full rounded-lg bg-secondary"
: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">
<span>
{{ genre.rating }}
</span>
<span> ({{ genre.count }}) </span>
</span>
</div>
</div>
</template>
<script setup>
const props = defineProps({
genre: {
type: Object,
required: true,
},
})
</script>
</pre>
<p>渲染的HTML輸出在<div>中顯示寬度為<code>w-[75%]</code>：</p>
<pre class="brush:html;toolbar:false;"><div class="h-full rounded-lg bg-secondary w-[75%]"></div></div>;
</前>
<p>這是我的package.json檔案：</p>
{
“名稱”：“項目名稱”，
“版本”：“0.0.0”，
「私人」：真實，
「腳本」：{
“dev”：“vite”，
“構建”：“vite 構建”，
“預覽”: “影片預覽”
},
「依賴關係」：{
“axios”：“^1.4.0”，
“firebase”：“^9.22.1”，
“vue”：“^3.3.2”，
“vue-router”：“^4.2.0”
},
「開發相依性」：{
“@vitejs/plugin-vue”：“^4.2.3”，
“自動前綴”：“^10.4.14”，
“postcss”：“^8.4.23”，
“更漂亮”：“^2.8.8”，
"prettier-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "^3.3.2",
“vite”：“^4.3.5”
}
}
</前>
<p>請問您能幫我解決這個問題嗎？</p>
<p>我嘗試在RatingBar元件中使用靜態值作為寬度，它正確渲染。然而，當我嘗試使用動態值作為寬度時，使用表達式:class="w-[${Math . floor(genre. rating * 10)}%]”</code>，渲染結果不如預期。它總是渲染為寬度為100%，而不是應用計算得到的寬度。
<p>我希望具有bg-secondary類別的div元素的寬度與基於genre. rating值計算的百分比相對應。例如，如果genre. rating為7.5，寬度應該是75%。</p>
<p>在DevTools中驗證了寬度值，但渲染的HTML輸出始終將寬度顯示為100%，而不管實際計算得到的值如何。</p>
<p>我將非常感謝您如何解決這個問題，以確保RatingBar組件中的動態框架正確渲染任何意見或建議。</p> 
根據文件：
相反，你可以使用
style屬性來設定width：<div class="h-full rounded-lg bg-secondary" :style="{ width: `${Math.floor(genre.rating * 10)}%` }" ></div>