標題重寫為：解決Vue.js 3和Tailwind CSS中RatingBar元件動態寬度渲染問題

Question

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

Answer 1

根據文件：

相反，你可以使用style屬性來設定width：

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