Как принудительно обновить данные Vue

Question

Я использую vuejs с laravel, и у меня есть ссылки на следующую и предыдущую страницы, когда 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

Вы можете использовать :key реквизиты в теге <router-view> и использовать полный путь маршрута.

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

Я использовал для установки наблюдателя текущего маршрута и функцию вызова вполучить данные, но я только что обнаружил, что мы можем сделать это после просмотра учебника по vue-router от vueschool.

Также см. ответ на этот вопрос

Answer 2

У вас есть две простые опции:

1) Измените «предыдущий» и «следующий» на действия @click, которые снова вызывают функцию извлечения, а затем обновите URL-адрес (например, вот так. $ 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()
}