Vue JS显示表行一次

Question

我无法弄清楚如何在我正在处理的代码中循环遍历数组。

我希望表格行不显示三次。

new Vue({
  el: '#app',
  data: {
    a: {
      b:[
          { c: [ {d: "1"}, {d: "2"}, {d: "3"} ] },
          { c: [ {d: "1"}, {d: "2"}, {d: "3"} ] },
          { c: [ {d: "1"}, {d: "2"}, {d: "3"} ] }
        ]
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <table>
  <thead>
    <tr v-for="b in a.b">
      <th v-for="c in b.c">{{c.d}}
        
      </th>
    </tr>
  </thead>
  </table>
</div>

https://jsfiddle.net/xe8w1q4u/

Answer 1

好吧，如果您只想显示第一行：

new Vue({
  el: '#app',
  data: {
    a: {
      b:[
          { c: [ {d: "1"}, {d: "2"}, {d: "3"} ] },
          { c: [ {d: "1"}, {d: "2"}, {d: "3"} ] },
          { c: [ {d: "1"}, {d: "2"}, {d: "3"} ] }
        ]
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <table>
  <thead>
    <tr v-if="a.b.length > 0">
      <th v-for="c in a.b[0].c">
        {{c.d}}
      </th>
    </tr>
  </thead>
  </table>
</div>