V-IF не реагирует при рендеринге кнопки - PullRequest
Новая
       16

V-IF не реагирует при рендеринге кнопки

0 голосов
/ 22 февраля 2020

У меня есть кнопка, которая используется для обработки кнопки назад. Я хочу отобразить эту кнопку только в дочерних компонентах, поэтому я добавил условие V-IF. 

<q-btn
    flat
    dense
    round
    v-go-back.single = true
    v-if="currentRoute"
    icon="arrow_back"
    class="q-mx-md menu-icon"
/>

<script>
export default {
  name: 'HeaderComponent',
  data () {
    return {
      route: this.$router.currentRoute.path
    }
  },
  computed: {
    currentRoute () {
      return this.route !== '/'
    }
  },
</script>

На домашней странице кнопка не видна. Но когда я изменяю маршрут на дочерний компонент, кнопка все еще не видна. При перезагрузке страницы в дочернем компоненте видна кнопка. И когда я возвращаюсь на домашнюю страницу, кнопка все еще видна. По существу, условие V-IF не является реактивным. Как я могу сделать это реактивным.

Любая помощь очень ценится.

С уважением

1 Ответ

1 голос
/ 22 февраля 2020

Я столкнулся с подобной проблемой. Я не могу объяснить, почему это так, но понимаю, что маршрут данных не отслеживается, поэтому маршрут не обновляется при изменении $ router.

Как мне это решить. Я вызвал функцию $ route watch 

<script>
export default {
  name: 'HeaderComponent',
  data () {
    return {
      route: this.$router.currentRoute.path
    }
  },
 watch: {
   // call again if the route changes
   '$route': function(to, from) {
           this.route = to.path
       }
   },
  computed: {
    currentRoute () {
      return this.route !== '/'
     }
   },
</script>
1005 *. Думаю, это поможет вам.
...