Vue - Как заставить работу разбивки на страницы, которая является частью ответа

Question

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

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">&gt;</a>
                            </li>
                        </ul>

Таким образом, в основном мне нужно сделать protectDefault для возвращенных ссылок на страницы, получить номер страницы по нажатой ссылке и использовать его в моем API, например, так: / wp-json / frm / v2 / views / 16 /? Page = 2

Answer 1

Что ж, вы можете использовать mounted ловушку для определения клика по ссылке, например:

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;
    })
}