如何使用 v-for 和 CSS Grid 显示数据答案

【问题标题】：How to display data using v-for and CSS Grid如何使用 v-for 和 CSS Grid 显示数据
【发布时间】：2019-02-28 03:24:46
【问题描述】：

我正在努力使用 CSS GRID 显示来自 Vuex 的数据。一切看起来都很乱。

我有两列。第一列显示标签：

{{$store.state.stepOne.textfield[idx].label}}

价值观的第二个

{{$store.state.stepOne.textfield[idx].value}}

这是我的 HTML：

.display-data
    span(
      v-for='(item, idx) in $store.state.stepOne.textfield'
      :key='idx'
    ) {{$store.state.stepOne.textfield[idx].label}}
    span(
      v-for='(item, idx) in $store.state.stepOne.textfield'
      :key='idx'
    ) {{$store.state.stepOne.textfield[idx].value}}

CSS：

.display-data
    display: grid
    grid-template-columns: 1fr 1fr
    grid-template-rows: repeat(25, 1fr)
    grid-gap: 15px 15px
    margin: 0 auto 50px auto
    width: 700px
    justify-items: center

我想做和下图一样的：

【问题讨论】：

“看起来很乱”是什么意思。你的 HTML 是什么？
@Paulie_D 那是我的 html。我正在使用哈巴狗.display-data span( v-for='(item, idx) in $store.state.stepOne.textfield' :key='idx' ) {{$store.state.stepOne.textfield[idx].label}} span( v-for='(item, idx) in $store.state.stepOne.textfield' :key='idx' ) {{$store.state.stepOne.textfield[idx].value}}
它必须在某些时候输出实际 HTML...对吗？
@Paulie_D 对
所以这就是我们需要看到的。换句话说，minimal reproducible example 这被“搞砸了”

标签： css vue.js css-grid

【解决方案1】：

我不知道如何编写 pug 代码，但你应该能够以某种方式编写这样的代码：

.display-data( v-for='(item, idx) in $store.state.stepOne.textfield' :key='idx' ) 
    span {{$store.state.stepOne.textfield[idx].label}}
    span {{$store.state.stepOne.textfield[idx].value}}

这样的东西可以工作

【讨论】：