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

我正在尝试将“上一步”和“下一步”按钮添加到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);
                }
            },

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

以下是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);
                }
            },

<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，但页面上的配置文件数据不会刷新。然后，如果您再次按下它，它将正常工作，页面上的数据将刷新，并与“上一步”按钮相同。这只是您第一次按下任何一个按钮。

loadCandidateProfileData

中的是

这个。$route.params.itemId

您希望它是什么？如果不是，这似乎意味着在

this.$router.push

完成之前调用了where

this.loadCandidateProfileData

通读一遍，问题似乎源于您试图导航到当前路线，并且您需要在路线更新之前使用

：

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

无论如何，最好将id传递到
loadCandidateProfileData
中，而不是从
内部查看
这个.route.params.itemId
。这样做可能会解决您的问题。
感谢劳伦斯·切龙的评论：

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

那么您就不需要this.loadCandidateProfileData（）命令；在其他方法中

注：如Adam Zerner所述，计算属性优先于观察者。
但是现在这解决了我的问题。
观察参数：
观察：{'$route.params.itemId'：…}
然后重新启动loadCandidateProfileData方法，而不是在previousCandidate etCal中调用它，
nextCandidate
和
previousCandidate
之间的区别是
previous\u record/previous\u record
属性，因此，您也可以传递该消息，因此调用next两次/三次/四次，然后单击back是有意义的，因为它不会正确跟踪您的第一条评论：您希望我在哪里重新定义loadCandidateProfileData方法？对不起，我是Vue js的新手。第二条评论：通过哪里？你能给我发一个js提琴的例子吗？如果你创建了一个js提琴，我会很乐意调整它：）就像在watch
watch:{'$route.params.itemId'：函数（）{this.loadCandidateProfileData（）}
，那么你就不需要this.loadCandidateProfileData（）；在其他方法中，您可以查看
response.data
，如果它为null，并且是no
this.previousRecord.id
，从结果中添加一个标志以禁用按钮，与next相同。是的，这是我期望的。$route.params.itemId。对不起，我是Vue js的新手。你所说的传递是什么意思，传递到底是什么意思？我的意思是将id作为参数传递到函数中，而不是从函数内部通过全局状态访问id。