"为什么我在 vue3 应用程序的 v-for 中调用增量方法时得到错误的数据？"

Question

当我在 v-for 循环中调用 vue3 中的增量方法时，我得到了错误的数据。<\/strong>

我的代码在下面给出，这里我可以使用index+100<\/strong>但我需要这样，这是我原始代码的示例版本。 代码后给出了屏幕截图，请参阅控制台日志，计数器比我预期的要多，索引也以605<\/strong>开头，但应该是100<\/strong>

<template>
  <table border="1" style="border-collapse: collapse">
    <thead><tr><th></th><th>Name</th><th>Username</th><th>Email</th></tr></thead>
    <tbody>
      <tr :key="index" v-for="(rowitem,index) in table_data.items">
        <td>{{getRowIndex()}}</td> <td>{{ rowitem.name }}</td> <td>{{ rowitem.username }}</td> <td>{{ rowitem.email }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      start_row_ind: 100,
      table_data: {
        items: [
          {"name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz",},
          {"name": "Ervin Howell", "username": "Antonette", "email": "Shanna@melissa.tv",},
          {"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan@yesenia.net"},
          {"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner@kory.org"},
          {"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger@annie.ca"},
        ]
      }
    }
  },
  methods: {
    getRowIndex(){
      console.log(this.start_row_ind);
      return this.start_row_ind++;
    }
  }
}
</script>

Answer 1

尝试不使用方法，只需在模板中添加索引，或者您可以将索引传递给您的方法：