Vue 不允许我生成网格模板列

Question

我把我的代码放在style scoped

这是我要生成的输出：

.user-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.user-card {
  padding: 1em;
  color: #f2f2f2;
  background: #1abc9c;
  border-radius: .25rem;
}

<div class="user-grid" v-for="user in allUsers" :key="user.id">
  <div class="user-card" v-if="user.client_id === $route.params.id">
    {{user.name}}
    {{user.email}}
    {{user.phone}}
  </div>
  <div class="user-card" v-if="user.client_id === $route.params.id">
    {{user.name}}
    {{user.email}}
    {{user.phone}}
  </div>
  <div class="user-card" v-if="user.client_id === $route.params.id">
    {{user.name}}
    {{user.email}}
    {{user.phone}}
  </div>
</div>

注意：不要介意我只是想表达 Vue/Nuxt 给我的 CSS 代码。

但是在 Vue/Nuxt 中我得到了这个：

我尝试将 auto-fit minmax 更改为 auto-fit，minmax(200px, 200px) 尺寸工作但显示不符合规则。

如何在 Vue/Nuxt 应用程序上应用显示网格？

Answer 1

我将我的课程从 Vue 中的 v-for 循环中移除。