如何使用 Vue js 添加上一个和下一个按钮？答案

【问题标题】：How to add Previous and Next buttons using Vue js?如何使用 Vue js 添加上一个和下一个按钮？
【发布时间】：2020-09-18 20:33:36
【问题描述】：

我正在尝试将“上一个”和“下一个”按钮添加到我的 SPA。我在前端使用 Vue js，在后端使用 Laravel。我现在遇到的问题是，当用户在切换 URL 中的 id 后单击 Prev 或 Next 按钮时，但没有加载新数据。如果您再次单击任一按钮，它们就会开始正常工作。

这是我的 SearchIndex.vue 组件：

nextCandidate: async function() {
                try {
                    const itemId = this.$route.params.itemId;
                    const response = await employerService.loadCandidateProfileData(itemId);
                    this.nextRecord = response.data.next_record;

                    this.$router.push(`/employer/search/filter-by/${this.nextRecord.id}/show`);
                    this.loadCandidateProfileData();

                } catch(error) {
                    this.$toast.error(error.response.data.message);
                }
            },

            previousCandidate: async function() {
                try {
                    const itemId = this.$route.params.itemId;
                    const response = await employerService.loadCandidateProfileData(itemId);
                    this.previousRecord = response.data.previous_record;

                    this.$router.push(`/employer/search/filter-by/${this.previousRecord.id}/show`);
                    this.loadCandidateProfileData();

                } catch(error) {
                    this.$toast.error(error.response.data.message);
                }
            },

loadCandidateProfileData: async function() {
                try {
                    const itemId = this.$route.params.itemId;
                    const response = await employerService.loadCandidateProfileData(itemId);

                    this.candidateProfiles = response.data.candidateProfiles;
                    
                } catch (error) {
                    this.$toast.error("Some error occurred, please refresh!");
                }
            },

这是我在 SearchIndex.vue 组件中的按钮：

<b-row class="mt-3 text-center mb-3">
                <b-col>
                    <button @click="previousCandidate()"
                            type="button"
                            class="btn btn-lg btn-dark mb-3"
                    >
                        < Prev
                    </button>
                </b-col>
                <b-col>
                    <button @click="nextCandidate()"
                            type="button"
                            class="btn btn-lg btn-dark mb-3"
                            >
                        Next >
                    </button>
                </b-col>
            </b-row>

因此，如果它在 URL 中显示 ID 为 1 的用户并且您单击下一步，在 URL 中它会转到 2，但页面上的配置文件数据不会刷新。然后，如果您再次按下它，它会正常工作，页面上的数据会刷新并且与上一个按钮相同。这只是您第一次按下任一按钮。

【问题讨论】：

观察参数：watch: {'$route.params.itemId': ...} 然后重新触发 loadCandidateProfileData 方法，而不是在 previousCandidate 等中调用它
另外nextCandidate 和previousCandidate 之间的区别是previous_record/previous_record 属性，所以你最好通过它，所以调用next 两次/三/四次然后单击返回是有意义的无法正确跟踪
在您的第一条评论中：您希望我在哪里重新触发 loadCandidateProfileData 方法？抱歉，我是 Vue js 的新手。第二条评论：通过哪里？你能给我发个 js fiddle 的例子吗？
如果你创建了一个 js 小提琴，我很乐意对其进行调整 :) 如手表 watch: {'$route.params.itemId': function (){this.loadCandidateProfileData()}} 中所说，那么你不需要 this.loadCandidateProfileData();在其他方法中。
你可以看看response.data，如果它为空，并且结果中不是this.previousRecord.id，添加一个标志来禁用按钮，与下一个相同。

标签： vue.js pagination

【解决方案1】：

感谢 Lawrence Cherone 的评论：

watch: {'$route.params.itemId': function (){this.loadCandidateProfileData()}}

那么你不需要 this.loadCandidateProfileData();在其他方法中。

注意：正如 Adam Zerner 所提到的，计算属性优于观察者。但现在这解决了我的问题。

【讨论】：

【解决方案2】：

loadCandidateProfileData 中的 this.$route.params.itemId 是您所期望的？如果没有，这似乎意味着有一个race condition，其中this.loadCandidateProfileData 在this.$router.push 完成之前被调用。

通读router.push docs 似乎问题可能源于您试图导航到当前路线，并且您需要使用beforeRouteUpdate：

注意：如果目的地与当前路线相同且仅参数正在改变（例如，从一个配置文件转到另一个 /users/1 -> /users/2)，您必须使用 beforeRouteUpdate 来响应更改（例如获取用户信息）。

无论如何，最好将 id 传递给 loadCandidateProfileData，而不是从 loadCandidateProfileData 内部查看 this.$route.params.itemId。这样做可能会解决您的问题。

【讨论】：

是的 this.$route.params.itemId 是我所期望的。抱歉，我是 Vue js 的新手。通过它是什么意思，通过它到底是什么？
我的意思是将 id 作为参数传递给函数，而不是通过函数内部的全局状态访问 id。