javascript - 如何使用 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 网格的正确方法是什么？

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>