Vue Значение данных компонента по умолчанию переопределяет то, что я установил в beforeRouteUpdate - PullRequest
Новая
       17

Vue Значение данных компонента по умолчанию переопределяет то, что я установил в beforeRouteUpdate

1 голос
/ 20 апреля 2020

Я использую vue -router beforeRouteEnter и beforeRouteUpdate для извлечения данных из REST API 

<template>
  <div>
    <h2>{{ league.name }} </h2>
    <user-list :users="league.leaderboard" type="list"/>
  </div>
</template>

<script>
import UserList from '../components/UserList.vue'
import League from '../model/League'
export default {

    components: {
        UserList
    },

    data() {
        return {
            league: { name: 'init', leaderboard: [] },
        }
    },

    methods: {
        setLeague(league) {
            this.league = league
        }
    },

    beforeRouteEnter(to, from, next) {
        League.$find(to.params.league)
            .then(league => {
                next(vm => {
                    vm.league = league
                })
            })
            .catch(err => {
                if(err.response && err.response.status == 404)
                    next('/404')
                else
                    next(vm => vm.error = err)
            })
    },

    watch: {
        league() {
            console.log('league changed ', this.league)
        }
    },

    beforeRouteUpdate(to, from, next) {
        this.league = null
        League.$find(to.params.league)
            .then(league => {
                this.setLeague(league)
                console.log('beforeUpdate: ', this.league)
                next()
            })
            .catch(err => {
                if(err.response && err.response.status == 404)
                    next('/404')
                else {
                    this.error = err
                    next()
                }
            })
    }
}
</script>

<style>

</style>

средство beforeRouteEnter работает должным образом.

В моем приложении есть общий случай где маршрут меняется с /leagues/1 на /leagues/1, поэтому мой компонент повторно используется и срабатывает защита beforeRouteUpdate. Там остальные данные извлекаются, а данные лиги устанавливаются через this.setLeague (). Вызов console.log выводит новые данные лиги. Однако когда вызывается next (), `` `this.league``` переопределяется на значение default (name: 'init' et c.), Которое я указал в функции data , Я понятия не имею, почему.

Я в основном адаптировал этот код непосредственно из vue документов здесь .

Интересно отметить, что триггеры this.league = null наблюдатель, а this.setLeague нет. Кроме того, выходные данные, зарегистрированные в beforeUpdateRoute, являются не наблюдателем vue, а объектом простой лиги. Я попытался изменить this.setLeague вызов на this.league = league, но это не помогло.

...