Блог

Мне нужно, чтобы разбивка на страницы, которая является частью данных ответа, работала с моим кодом вместе с фильтрами.

JS

 var entriesList = new Vue({

    el: "#post-list-template",

    data: {
        posts: [],
        categories: [],
        currentEntries: ''
    },

    created: function () {
        this.fetchData();
    },

    watch: {
        currentEntries: 'fetchData' 
    },

    methods: {
        fetchData: function () {

            var self = this;

            var apiKey = 'my-key';

            axios.get('/wp-json/frm/v2/views/16', {
                    headers: {
                        Authorization: 'Basic '  btoa( apiKey  ':x' )
                    },
                    params: {
                        phouse: self.currentEntries
                    }
                })
                .then((response) => {
                    this.posts = response.data.renderedHtml;
                })
                .catch((e) => {
                    console.error(e)
                })

            //all category data

            axios.get('/wp-json/wp/v2/categories/')
                .then(response => this.categories = response.data);
        }
    } 

})

  

Возвращаемый html-код разбивки на страницы имеет следующий формат

                         <ul class="frm_pagination">
                            <li class="active">
                                <a href="?frm-page-16=1">1</a>
                            </li>
                            <li class="">
                                <a href="?frm-page-16=2">2</a>
                            </li>
                            <li class="">
                                <a href="?frm-page-16=3">3</a>
                            </li> 
                            <li class="dots disabled">...</li> 
                            <li class="">
                                <a href="?frm-page-16=40">40</a>
                            </li>
                            <li class="">
                                <a href="?frm-page-16=2" class="next">amp;></a>
                            </li>
                        </ul>
  

Итак, в основном мне нужно выполнить preventDefault для возвращенных ссылок разбивки на страницы, получить номер страницы по ссылке, на которую нажали, и использовать его в моем api, например, так /wp-json/frm/v2/views/16/?page = 2

Ну, вы можете использовать mounted hook для определения щелчка по ссылке следующим образом:

 mounted(){

    this.$el.addEventListener('click', ev => {

        // detect if a pagination link is clicked
        if( !ev.target.matches('.frm_pagination a') ) return;

        ev.preventDefault();

        let page = ev.target.href.match(/rm-page-16=(d )/)[1];

        // use the page;
    })
}