如何强制更新vue数据

Question

我在 laravel 中使用 vuejs，当 url 发生变化但新数据不会显示时，我有下一页和上一页的链接。

代码

Controller

$verse = Chapter::where('slug', $slug)->with(['verses', 'book'])->first();
$next = Chapter::where('id', '>', $verse->id)->first();
$previous = Chapter::where('id', '<', $verse->id)->first();
return response()->json([
  'verses' => $verse,
  'next' => $next,
  'previous' => $previous,
]);

component

<div v-if="previous !== null" :v-model="previous" class="bible-nav-button previous">
    <router-link :to="`/${testament_slug}/${book_slug}/${previous.slug}`">
        <i class="fas fa-chevron-left"></i> <span>Previous</span>
    </router-link>
</div>
<div v-if="next !== null" :v-model="next" class="bible-nav-button next">
    <router-link :to="`/${testament_slug}/${book_slug}/${next.slug}`">
        <span>Next</span> <i class="fas fa-chevron-right"></i>
    </router-link>
</div>

<script>
    export default {
        name: "books",
        data() {
            return {
                url: window.location.origin + "" + window.location.pathname,
                title: '',
                testament_slug:'',
                book_slug: '',
                slug: '',
                verses: [],
                next: '',
                previous: ''
            }
        },
        methods: {
            getBooks: function(){
                this.testament_slug = this.$route.params.testament_slug
                this.book_slug = this.$route.params.book_slug
                this.slug = this.$route.params.slug
                axios.get('/api/'+this.$route.params.book_slug+'/'+this.$route.params.slug+'/'+this.$route.params.slug).then((res) => {
                    this.verses = res.data.verses
                    this.title = "Read Bible: " +res.data.verses.book.name+ " " +res.data.verses.name
                    this.next = res.data.next
                    this.previous= res.data.previous
                })
                .catch((err) => {
                    console.log(err)
                });
            },
            myHTML: function(item) {
                return "<strong>"+item.number+"</strong> "+item.body+" ";
            }
        },
        mounted() {
            this.getBooks();
        }
    }
</script>

知道如何获取我的新数据吗？

Answer 1

您可以在<router-view> 标签中使用:key 属性并使用路由全路径。

<router-view :key="$route.fullPath"></router-view>

我之前放了一个当前路由的watcher，调用函数来获取数据，但是看了vueschool的vue-router教程后才发现我们可以这样做。

另见question的答案

Answer 2

您有两个简单的选择：

1) 将“上一个”和“下一个”更改为再次调用 fetch 函数然后更新 URL 的 @click 操作（例如 this.$router.push()）。

<span @click="goNext(/* needed arguments here */)">Next</span>

goNext (/* params here */) {
     //set whatever variables you need to
     this.$router.push(/* route as string here */)
     this.getBooks()
}

2) 由于您使用的是路由器，因此每次 URL 更改时都使用警卫进行更新： https://router.vuejs.org/guide/advanced/navigation-guards.html

beforeRouteUpdate(to, from, next) {
     this.getBooks()
     next()
}