javascript - 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 这样的变量(参见下面的示例)来存储序列号。
• 使用小正则表达式从 docType 中检索数字
• 创建一个 Vue 方法，以便在需要时将 sNum 返回到 View 中:

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>