Question

我正在开发一个小型VueJS应用程序，该应用程序通过API提取WordPress帖子。通过分页，一切都很好，可以加载更多帖子，但是当您更改用户ID单选字段时，我不太确定如何重置整个XHR getPosts method。

当前更改author ID时，不会重置结果。我认为watch:区域应该破坏当前页面-但不是太确定。谢谢！

JS

Vue.component("posts", {
    template: `
    <ul>
        <slot></slot>
    </ul>
    `
});

Vue.component("post", {
    props: ["title", "excerpt", "permalink"],
    template: `
    <li>
        <h3 v-html="title"></h3>
        <div v-if="excerpt" v-html="excerpt"></div>
        <a :href="permalink">Read More</a>
    </li>
    `
});

var App = new Vue({
    el: "#app",
    data: {
        greeting: "Load more Posts Vue + WP REST API",
        page: 0,
        posts: [],
        totalPages: "",
        apiURL: "https://poststatus.com/wp-json/wp/v2/posts/?per_page=2",
        isLoading: "",
        show: true,
        authors: [1, 590],
        currentAuthor: ""
    },
    watch: {
        currentAuthor: "fetchData"
    },
    methods: {
        getPosts: function() {
            var xhr = new XMLHttpRequest();
            var self = this;

            self.page++;
            self.isLoading = "is-loading";

            xhr.open(
                "GET",
                self.apiURL + "&page=" + self.page + "&author=" + self.currentAuthor
            );

            xhr.onload = function() {
                self.totalPages = xhr.getResponseHeader("X-WP-TotalPages");

                if (self.page == self.totalPages) {
                    self.show = false;
                }

                var newPosts = JSON.parse(xhr.responseText);

                newPosts.forEach(function(element) {
                    self.posts.push(element);
                });
                self.isLoading = null;
                //console.log(self.apiURL + self.page)
            };
            xhr.send();
        }
    }
});

HTML

    <section id="app" class="wrapper">
        <div class="container">

            <div class="box">
                <template v-for="author in authors">
                    <div class="author-toggle">
                        <input type="radio"
                            :id="author"
                            :value="author"
                            name="author"
                            v-model="currentAuthor">
                        <label :for="author">{{ author }}</label>
                    </div>
                </template><br>
                <h3 v-if="page>0">Showing Page {{page}} of {{totalPages}}</h3>

                <progress v-if="page>0" class="progress" :value="page" :max="totalPages">{{page}}</progress>

                <posts v-if="posts">
                    <post v-for="post in posts" class="post" :id="'post' + post.id" :title="post.title.rendered" :permalink="post.link" :key="post.id">
                    </post>
                </posts>

                <button :class="isLoading + ' ' +'button is-primary'" v-if="show" @click="getPosts(page)">Load Posts</button>

            </div>
        </div>
    </section>

Answer 1

您可以在观察者内部重置page，posts和totalPages：

watch: {
  currentAuthor() {
    this.page = 0;
    this.totalPages = 0;
    this.posts = [];
    this.getPosts();
  }
}

your codepen with required changes

更改手表时重置VueJS分页

1 个答案: