laravel-Vue-pagination 사용시 다른 페이지로 이동할 수 없는 문제 해결

Question

테이블에는 데이터가 표시되고 있는데 Laravel Vue Pagination에서 제공하는 페이지 번호를 클릭하면 동일한 페이지 번호 1이 표시됩니다. 음, 가장 큰 문제는 페이지 번호가 함수(컴포저블 API)에 전달되지 않는다는 것입니다.

템플릿 양식

<table class="table table-striped table-bordered">
    <머리>
      <번째> SN
      <번째> 계정 유형
      <번째> 이름
      <번째> 매장 이름
      <번째>주소
      <th>연락처</th>
      <번째> 이메일
    </머리>
    <본문>
      <tr v-for="(account, i) in account.data" :key="account.id">
        <td>{{ ++i }}</td>
        <td>{{ account.account_type }}</td>
        <td>{{ 계정 이름 }}</td>
        <td>{{ (account.shop_name)?account.shop_name: 'EMPTY'}}</td>
        <td>{{ account.address }}</td>
        <td>{{ account.contact_number }}</td>
        <td>{{ account.email }}</td>
      </tr>
    </tbody>
  </테이블>
  <페이지 매김:data="accounts" @pagination-change-page="getAccounts"
</템플릿>

Composable API의 데이터는 data에 전달되고, 함수(Composable)도 @pagination-change-page에 전달됩니다.스크립트 태그

'laravel-vue-pagination'에서 LaravelVuePagination을 가져옵니다.

기본값 내보내기 {
    구성요소: {
        '페이지 매김': LaravelVuePagination
    },
  설정() {
    }
    const 페이지 매김 = ref(10);
    const { 계정, 로드, getAccounts } = accountDetails();//컴포저블 API
    onMounted(() => {
      getAccounts({paginate:paginates});
    });

    return { 계정, 로드 중, getAccounts };
  },
};

컴포저블 API 이 함수에서는 두 개의 매개변수를 받으며, 여기서 Pagination(@pagination-change-page)이 페이지 번호를 버려야 합니다!

'@vue/reactivity'에서 { 참조 } 가져오기;
'axios'에서 axios를 가져옵니다.

const accountDetails = () =>
    const 계정 = ref({});
    const 로딩 = ref(true);
    const accountError = ref({});


    const getAccounts = async ({page=1,paginate}) =>
        axios.get('api/account/getAccounts?page='+page+'paginate='+paginate, {
            헤더: {
                승인: `전달자 ${localStorage.getItem('token')}`,
                수락: 'application/json',
            }
        }).then((res) => {
            account.value = res.data;
            로딩.값 = 거짓;
            console.log(accounts.value);
        }).catch((resErr) => {
            로딩.값 = 거짓;
            accountError.value = resErr;
        })
    }
    { 계정, 로드 중, accountError, getAccounts } 반환
}
기본 계정 내보내기세부정보;

Answer 1

Composition API Vue3
을 사용하여 성공적으로 작업했습니다. getAccounts에서 paginate 매개변수를 제거하고 함수에 페이지 매김을 전달하지 마세요.

업데이트된 코드 </>

스크립트

으아악

컴포저블 API

으아악