javascript - 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>

所以基本上我需要对返回的分页链接执行preventDefault，从单击的链接获取页码并在我的api中使用它，如下所示/wp-json/frm/v2/views/16/?page=2

Answer 1

好吧，您可以使用 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;
    })
}