Vuetify와 Laravel과 어떻게 결합합니까?

Vuetify와 Laravel과 어떻게 결합합니까?

안녕히 주무세요.

Vuetify와 Laravel과 함께 서버 측 페이징을 하려고 합니다.

하지만 Vuetify가 제공한 방법은 제대로 작동하지 않았습니다.Vuetify 컴포넌트로 구현하고 싶은 페이지가 있습니다.

간단한 부트스트랩으로 만든 코드를 첨부합니다.

  <ul class="pagination">
      <li class="page-item" v-if="pagination.current_page > 1">
          <v-btn flat icon color="red lighten-2">
            <v-icon  @click.prevent="changePage(pagination.current_page - 1, search)">thumb_down</v-icon>
          </v-btn>
      </li>
      <li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page == isActived ? 'active' : '']">
            <v-btn fab dark color="indigo" @click.prevent="changePage(page, search)" v-text="page">
            </v-btn>
      </li>
      <li class="page-item" v-if="pagination.current_page < pagination.last_page">             
          <v-btn flat icon color="red lighten-2">
            <v-icon  @click.prevent="changePage(pagination.current_page + 1, search)">thumb_down</v-icon>
          </v-btn>
      </li>
  </ul>  

페이지 투 서버 방법:

    methods:{
            get(page, search){
              let url = `http://127.0.0.1:8000/api/articles?page=${page}&search=${search}`;
              axios.get(url)
                  .then( response => {

                  let res = response.data
                  this.products = res.articles.data; 
                  this.pagination = res.pagination;
                })
                .catch(function (error) {
                  console.log(error);
                })
            },
            changePage(page, search){
                this.pagination.current_page = page;
                this.get(page, search);
          },
 },

이전 코드는 올바르게 동작하지만 실제로 Vuetify 컴포넌트의 페이징을 사용하지 않습니다.

페이징에 Vuetify 컴포넌트를 사용하면 페이지 번호만 표시되지만 서버에서 제공하는 페이지 사이를 통과할 수 없습니다.

      <v-pagination
        v-model="pagination.current_page"
        :length="pagination.total"
        prev-icon="mdi-menu-left"
        next-icon="mdi-menu-right"
        @input="next"
      ></v-pagination>

정보를 검색하면 @input="next"를 사용하여 다음 페이지로 이동하기 위한 메서드를 호출할 수 있지만 무엇을 사용하여 반환할 수 있습니까?

부트스트랩으로 작성된 코드와 같이 임의의 페이지 번호를 클릭하여 서버에 페이지를 요청하려면 어떻게 해야 합니까?

내가 도울 수 있으면 좋겠고 고마워.

다음은 Larabel 5.5 및 Vuetify 1.3에서 사용할 수 있는 기능입니다.

---

HTML

<v-pagination
    v-model="pagination.current"
    :length="pagination.total"
    @input="onPageChange"
></v-pagination>

---

JS

export default {
    data() {
        return {
            users: null,
            pagination: {
                current: 1,
                total: 0
            }
        }
    },
    methods: {
        getUsers() {
            window.axios.get('/api/users?page=' + this.pagination.current)
                .then(response => {
                    this.users = response.data.data;
                    this.pagination.current = response.data.current_page;
                    this.pagination.total = response.data.last_page;
                });
        },
        onPageChange() {
            this.getUsers();
        }
    },
    mounted() {
        this.getUsers();
    }
}

---

라라벨

public function users()
{
    $users = User::paginate(10);

    return response($users, 200);
}

컴포넌트가 마운트되면getUsers()전화가 올 거예요. pagination.current기본값은 1 이므로 첫 페이지가 로드됩니다.응답이 설정됩니다.pagination.total.Vuetify 핸들 페이지버튼의 바인드처pagination.current1개를 클릭하면pagination.current페이지 번호로 설정되고 나서@input트리거getUsers()어느 쪽이pagination.current선택한 페이지를 가져옵니다.

주의: 레벨 5.8에서는 페이지 번호 응답 객체가 다음과 같이 변경되었을 수 있습니다.response.data.current_page로.response.data.meta.current_page그리고.response.data.last_page로.response.data.meta.last_page.

언급URL : https://stackoverflow.com/questions/52697892/how-to-paginate-with-vuetify-and-laravel