vue js中的序列无条件

Question

我正在获取一个对象并将其迭代以显示在表中。 现在表格如下所示。

<tr v-for="(cover,index) in  packetDocument" i = index>
  <td align="center">{{index+1}}</td>
  <td align="center">{{cover.docFile}}</td>
  <td align="center">{{cover.docType}}</td>
  <td align="center" colspan="2">{{cover.docDesc}}</td>
</tr>

由于第1列属于同一类别，我想像这样显示序列号，

请告诉我如何进行此操作。

Answer 1

你可以：

• 使用sNum之类的变量（请参阅下面的示例）来存储序列号。
• 使用小型regexp
检索docType中的数字
• 创建一个Vue method，以便在需要时将sNum返回到视图中：

var sNum = -1;

new Vue({
  el: "#app",
  data: {
    packetDocument: [
      {docFile:"trz", docType:"type1", docDesc:"def"},
      {docFile:"fgh", docType:"type1", docDesc:"jhj"},
      {docFile:"eze", docType:"type2", docDesc:"oiu"},
      {docFile:"cvb", docType:"type2", docDesc:"tzz"},
      {docFile:"vbn", docType:"type7", docDesc:"rtz"},
      {docFile:"vbn", docType:"type7", docDesc:"rew"}
    ]
  },
  methods: {
    serialNum: function(cover) {
      var n = cover.docType.replace(/\D/g, '');
      if (sNum !== n) {
        sNum = n;
        return sNum
      }
    }
  }
});

td {
  padding: 4px 8px;
  border: 1px solid #ddd;
}

<div id="app">
  <table>

    <tr v-for="(cover,index) in  packetDocument" i=index>
      <td align="center">{{serialNum(cover)}}</td>
      <td align="center">{{cover.docFile}}</td>
      <td align="center">{{cover.docType}}</td>
      <td align="center" colspan="2">{{cover.docDesc}}</td>
    </tr>

  </table>
</div>

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