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循环中退出。