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

Question

我正在努力使用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

我要与下图相同：

Answer 1

我不知道如何编写哈巴狗代码，但您应该能够以某种方式编写如下代码：

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

类似的东西可能起作用