Vue3.0 中删除数据后保持当前页码的技巧

2024-02-23 06:40:51

Vue3.0에서 데이터를 삭제한 후 현재 페이지를 유지하는 방법

Vue3.0에서 데이터를 삭제한 후 현재 페이지를 유지하려면 다음 단계를 따르십시오.

데이터를 삭제하기 전에 현재 페이지 번호를 저장합니다.

let currentPage = this.my.page;

데이터를 삭제합니다.

this.my.splice(index, 1);

데이터를 삭제한 후에 현재 페이지 번호를 설정합니다.

this.my.page = currentPage;

페이지네이션을 업데이트합니다.

this.my.total = this.my.length;

이렇게 하면 Vue3.0에서 데이터를 삭제한 후에도 현재 페이지가 유지됩니다.

코드 예제

다음은 Vue3.0에서 데이터를 삭제한 후 현재 페이지를 유지하는 방법을 보여주는 코드 예제입니다.

<template>
  <div>
    <ul>
      <li v-for="item in my" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="removeItem">삭제</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      my: [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Doe' },
        { id: 3, name: 'Peter Parker' },
      ],
      currentPage: 1,
      perPage: 10,
    };
  },
  methods: {
    removeItem() {
      // 현재 페이지 번호를 저장합니다.
      let currentPage = this.currentPage;

      // 데이터를 삭제합니다.
      this.my.splice(0, 1);

      // 데이터를 삭제한 후에 현재 페이지 번호를 설정합니다.
      this.currentPage = currentPage;

      // 페이지네이션을 업데이트합니다.
      this.total = this.my.length;
    },
  },
};
</script>