渲染按钮时 V-IF 没有反应

Question

我有一个用于处理后退按钮的按钮。我只想在子组件中呈现此按钮，所以我添加了一个 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 条件不是反应性的。我怎样才能使它具有反应性。

非常感谢任何帮助。

此致

Answer 1

我遇到了类似的问题。我无法解释为什么会这样，但我明白数据路由没有受到深入关注，所以路由不会随着 $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>

我想这会对你有所帮助。

渲染按钮时 V-IF 没有反应

V-IF not reactive while rendering button

vue.js

reactive