javascript - 如何设置 v-for 索引从某个数字开始？

Question

我有一个 v-for 循环遍历所有对象并将索引号分配为按钮 ID，但是由于 slice 函数停止了它，索引将计数从零开始。当我转到下一页时，我需要使用正确的索引号检索正确的对象。我如何访问和设置 v-for 中的索引，以便我可以让它以我想要的某个数字开始？

new Vue({
  el: "#app",
  data: {
    objects: [],
    limit: 12,
    searchName: ""
  },
  computed: {
    computedObj() {
      var merchants = this.limit
        ? this.objects.slice(num, this.limit)
        : this.objects;
    },
    filteredObjects: function() {
      var self = this;
      var merchants = this.limit
        ? this.objects.slice(num, this.limit)
        : this.objects;
      if (this.searchName != "") {
        var merchants = this.objects;
      }
      return merchants.filter(function(merchant) {
        return (
          merchant.name.toLowerCase().indexOf(self.searchName.toLowerCase()) !==
          -1
        );
      });
    }
  },
  mounted() {
    axios
      .get("url")
      // retreives an object
      .then(response => (this.objects = response.data.data));
  }
});

和 HTML:

<tr v-for = "(object, index) in filteredObjects":key="object">
  <td><a href="javascript:void(0)">{{ object.id }}</a></td>
  <td>{{ object.name }}</td>
  <td>{{ object.address }}</td>
  <!--  <td>{{ object.device_id }}</td> -->
  <td>{{ object.email }}</td>
  <td>{{ object.reward_percentage }}%</td>
  <td><span class="text-muted" style="white-space:nowrap;"><i class="far fa-clock"></i> Sep 22, 1997</span> </td>
  <td style="white-space:nowrap;">
    <div class="label label-table label-success">
      <a :id="index" style="color: white" onclick="getIDView(this.id)">
        <i class="ti ti-eye"></i>
      </a>
    </div>
    <div class="label label-table label-info">
      <a :id="index" style="color: white" onclick="getIDUpdate(this.id)">
        <i class="ti ti-pencil"></i>
      </a>
    </div>
    <div class="label label-table label-danger">
      <a :id="index" style="color: white" onclick="getID(this.id)">
        <i class="ti ti-close"></i>
      </a>
    </div>
  </td>
</tr>

Answer 1

您不需要修改 v-for 或查看偏移 数据属性和计算 属性。

我的主要观点是:不要修改您的模板 - 修改您输入模板的列表/数组。 v-for 有点不错 :)

看看这个片段:

new Vue({
  el: "#app",
  data: {
    merchants: [],
    offset: 0
  },
  computed: {
    offsetMerchants() {
      if (this.offset < 2) this.offset = 0
      if (this.offset > 8) this.offset = 8
      return this.merchants.slice(this.offset, this.offset + 2)
    }
  },
  methods: {
    fetchMerchants() {
      return fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(json => {
          // console.log(json)
          return json
        })
    },
    prev() {
      this.offset -= 2
    },
    next() {
      this.offset += 2
    }
  },
  async mounted() {
    this.merchants = await this.fetchMerchants()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  The app downloads 10 users from the mock JSON API, but only shows 2 at a time - like pagination.<br /><br />
  <button @click="prev()">PREVIOUS MERCHANTS</button>
  <button @click="next()">NEXT MERCHANTS</button>
  <ul>
    <li v-for="merchant in offsetMerchants">
      ID: {{merchant.id}}<br /> Name: {{merchant.name}}<br /> Email: <a :href="'mailto:'+merchant.email">{{merchant.email}}</a><br />
    </li>
  </ul>
</div>

如您所见，v-for 没有受到影响 - 唯一的额外步骤是

1. 向数据添加偏移量

2. 不是直接列出数据属性，而是一个计算属性。

不过请注意，计算属性应该返回一个值 - 所以不要用它来改变数据(为此使用方法)。

因此，您可以将此偏移值作为参数传递给下一个页面，或者将其保存到 localStorage 或 cookie，并在您的下一个 View 中使用它。