Tajuk ditulis semula sebagai: Menyelesaikan masalah pemaparan lebar dinamik komponen RatingBar dalam Vue.js 3 dan Tailwind CSS

Question

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

Ini ialah kod saya dalam komponen RatingBar.vue:

const props = defineProps({
  genre: {
    jenis: Objek,
    dikehendaki: benar,
  },
})


Paparan output HTML dalam 
 dengan lebar w-[75%]: 



这是我的package.json文件：
{
  "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"
  }
}


请问您能帮我解决这个问题吗？
我尝试在RatingBar组件中使用静态值作为宽度，它正确渲染。然而，当我尝态值作为宽度，它正确渲染。然而，当我尝而当我尝态度作为宽度，它正确渲染。然而，当我尝而当我尝為度何住时，使用表达式:class="w-[${Math .floor(genre.rating * 10)}%]"，渲染结果并不如预期。它总是渲染为宽度为100%，而度管宽度。
我期望具有bg-secondary类的div元素的宽度与基于genre.rating值计算的百分比相对应。例如，5例如，5例如，5例如，5例如，5例如，5例如，5例如，度店该是75%。
尽管在DevTools中验证了宽度值，但渲染的HTML输出始终将宽度显示为100%，而得不管如何。
我将非常感谢您对如何解决此问题并使RatingBar组件中的动态宽度正确宽度正确宽度正确渲染的记仁渲染。 /p>            

Answer 1

Menurut Dokumentasi:

Sebaliknya anda boleh menggunakan style属性来设置width:

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