如何用vue构建动态表？

问题描述

我试图从以下数据属性中找到构建表的方式：

   data(){
   return {
       headlist: [
    {row: ID},{row: Name},{row: Title},{row: Description },{row: Actions }
    ],}

模板代码：

    <table class="table table-bordered">
          <thead>
          <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Title</th>
              <th>Description</th>
              <th>Actions</th>
          </tr>

现在尝试替换为：

           <thead>
           <tr v-repeat="headlist ">
              <th>{{row}}</th>
          </tr>
          </thead>
 

从https://012.vuejs.org/guide/list.html

找到示例

我的代码有什么问题？

解决方法

这是旧版VueJS的文档。你不应该指那个。另外，您应该是using the v-for directive：

<th v-for="(entry,i) in headlist" v-bind:key="i">
  {{ entry.row }}
</th>

概念验证：

new Vue({
  el: '#app',data: function() {
    return {
      headlist: [{
          row: 'ID'
        },{
          row: 'Name'
        },{
          row: 'Title'
        },{
          row: 'Description'
        },{
          row: 'Actions'
        }
      ],}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="(entry,i) in headlist" v-bind:key="i">
          {{ entry.row }}
        </th>
      </tr>
    </thead>
  </table>
</div>