如何使用 Vue 构建动态 CSS 网格？

Question

背景

我想构建一个 Vue.js 组件，它将被重复使用两次 - 组件彼此相邻，由 CSS 网格 (display: grid;) 管理。它们将在屏幕宽度上占据相等的空间。

组件本身将是行的网格，在 Vue 中动态生成。

这是应该的样子：

纯 HTML/CSS 解决方案（工作正常）

以下代码正确生成了我所期望的：左侧三行时间/内容对，右侧两行这样的 (Codepen version)

.grid {
  display: grid;
  grid-template-columns: 6ch auto;
}

#app {
  width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hour {
  text-align: right;
  padding: 3px 5px 3px 3px;
}

.name {
  text-align: left;
  padding: 3px 5px 3px 3px;
}

<div id="app">

  <div class="grid">
    <span class="hour">9:10</span> <span class="name">Acituf haih bim nizec ziohra uvi utucivsew koukeji fip kene ejviv wiel oj paphewan ilo newut.</span>
    <span class="hour">19:40</span> <span class="name">Macun dahhis cekdiwvug iti fieldu ab rewki pa ruoti abfonon cagoh codsi zadufi pu jurwut urmo owzew cawub.</span>
    <span class="hour">23:18</span> <span class="name">Zerba clegsns dgdrelm cevblrh.</span>
  </div>

  <div class="grid">
    <span class="hour">12:17</span> <span class="name">Hevkeek pe niwwat omkodo hapwas fepono azahawop ir bilbuel kame usipe cato icakori rosi sommawo.</span>
    <span class="hour">14:10</span> <span class="name">Hocmaizi weipe low rit todzup evtepcot zesaif unebojmug bageta ri fop sec ibti kukdo caukuocu fugocofo.</span>
  </div>

</div>

HTML/CSS/JS+Vue 版本（不按预期工作）

现在通过 Vue 在组件挂载时生成相同的内容。 请注意，结果是不同的：盒子都混在一起了。

我想这是因为内容正在出现，然后由 CSS Grid 渲染并放置在相关位置，但随后出现了新内容，这不是 Grid 所期望的处理方式（在这里疯狂推测)

(Codepen version)

new Vue({
  el: '#app',
  data: {
    els1: [],
    els2: []
  },
  mounted() {
    // content of the left box
    this.els1.push({
      first: '9:10',
      last: 'Acituf haih bim nizec ziohra uvi utucivsew koukeji fip kene ejviv wiel oj paphewan ilo newut.'
    })
    this.els1.push({
      first: '19:40',
      last: 'Macun dahhis cekdiwvug iti fieldu ab rewki pa ruoti abfonon cagoh codsi zadufi pu jurwut urmo owzew cawub.'
    })
    this.els1.push({
      first: '23:18',
      last: 'Zerba clegsns dgdrelm cevblrh.'
    })
    // content of the right box
    this.els2.push({
      first: '12:17',
      last: 'Hevkeek pe niwwat omkodo hapwas fepono azahawop ir bilbuel kame usipe cato icakori rosi sommawo.'
    })
    this.els2.push({
      first: '14:10',
      last: 'Hocmaizi weipe low rit todzup evtepcot zesaif unebojmug bageta ri fop sec ibti kukdo caukuocu fugocofo.'
    })
  }
})

.grid {
  display: grid;
  grid-template-columns: 6ch auto;
}

#app {
  width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hour {
  text-align: right;
  padding: 3px 5px 3px 3px;
}

.name {
  text-align: left;
  padding: 3px 5px 3px 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">

  <div class="grid" v-for="e1 in els1">
    <span class="hour">{{e1.first}}</span> <span class="name">{{e1.last}}</span>
  </div>

  <div class="grid" v-for="e2 in els2">
    <span class="hour">{{e2.first}}</span> <span class="name">{{e2.last}}</span>
  </div>

</div>

指示 CSS Grid 处理此类动态内容的正确方法是什么？

Answer 1

您正在重复网格而不是内容。您需要将内容包装成<template> 或<div>：

new Vue({
  el: '#app',
  data: {
    els1: [],
    els2: []
  },
  mounted() {
    // content of the left box
    this.els1.push({
      first: '9:10',
      last: 'Acituf haih bim nizec ziohra uvi utucivsew koukeji fip kene ejviv wiel oj paphewan ilo newut.'
    })
    this.els1.push({
      first: '19:40',
      last: 'Macun dahhis cekdiwvug iti fieldu ab rewki pa ruoti abfonon cagoh codsi zadufi pu jurwut urmo owzew cawub.'
    })
    this.els1.push({
      first: '23:18',
      last: 'Zerba clegsns dgdrelm cevblrh.'
    })
    // content of the right box
    this.els2.push({
      first: '12:17',
      last: 'Hevkeek pe niwwat omkodo hapwas fepono azahawop ir bilbuel kame usipe cato icakori rosi sommawo.'
    })
    this.els2.push({
      first: '14:10',
      last: 'Hocmaizi weipe low rit todzup evtepcot zesaif unebojmug bageta ri fop sec ibti kukdo caukuocu fugocofo.'
    })
  }
})

.grid {
  display: grid;
  grid-template-columns: 6ch auto;
}

#app {
  width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hour {
  text-align: right;
  padding: 3px 5px 3px 3px;
}

.name {
  text-align: left;
  padding: 3px 5px 3px 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  
  <div class="grid">
    <template v-for="e1 in els1">
      <span class="hour">{{e1.first}}</span> <span class="name">{{e1.last}}</span>
    </template>
  </div>
  
  <div class="grid" >
    <template v-for="e2 in els2">
      <span class="hour">{{e2.first}}</span> <span class="name">{{e2.last}}</span>
    </template>
    
  </div>
 
</div>