Как отображать данные с помощью v-for и CSS Grid

Question

Я изо всех сил пытаюсь отобразить свои данные из Vuex, используя CSS GRID.Все выглядит грязно.

У меня есть две колонки.В первом столбце отображаются метки:

{{$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}}

что-то подобное может работать