제목은 다음과 같이 다시 작성되었습니다. Vue.js 3 및 Tailwind CSS에서 RatingBar 구성 요소의 동적 너비 렌더링 문제 해결

Question

저는 Vue.js 3과 Tailwind CSS를 사용하고 있습니다. RatingBar라는 구성 요소가 있고 상위 요소의 클래스에 동적 너비 값을 적용하려고 합니다. 하지만 DevTools에서 예상 너비를 볼 수 있지만 100%로 렌더링됩니다.

이것은 RatingBar.vue 구성요소에 있는 코드입니다:

<템플릿>
  <div class="my-2 그리드 Grid-cols-3 항목-센터">
    <span class="text-left text-sm">{{ 장르.이름 }}</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.rated * 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> ({{ 장르.수 }}) </span>
      </스팬>
    </div>
  </div>
</템플릿>

<스크립트 설정>
const 소품 = 정의Props({
  장르: {
    유형: 객체,
    필수: 사실,
  },
})
</스크립트>

렌더링된 HTML 출력은 w-[75%] 너비의

로 표시됩니다.

<div class="h-full rounded-lg bg-secondary w-[75%]"></div>

这是我的package.json文件：

{
  "이름": "프로젝트_이름",
  "버전": "0.0.0",
  "비공개": 사실,
  "스크립트": {
    "dev": "초대",
    "build": "vite 빌드",
    "preview": "초대 미리보기"
  },
  "종속성": {
    "축": "^1.4.0",
    "firebase": "^9.22.1",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0"
  },
  "devDependency": {
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "더 예뻐요": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.3.2",
    "초대": "^4.3.5"
  }
}

请问您能帮我解决这个问题吗?

我尝试는 RatingBar组件中使用静态值作为宽島，它正确渲染。然而，当我尝试使用动态值时，使用表达式 ;:class="w-[${수학 .floor(genre.rated * 10)}%]"

저희는 bg-secondary 유형의 div에 대한 등급이 7.5%이고 등급이 75%에 달합니다.

DevTools中验证了宽島值, 但渲染의 HTML은 100%로 출력할 수 없으며, 더 이상 사용할 수 없습니다.

저희는 RatingBar에서 평점을 매기고 있습니다.

Answer 1

Documentation에 따르면:

대신 style属性来设置width:

을 사용할 수 있습니다. 으아악