template v-if =“main”，not working with this this。$ route.path.indexOf（'/'）=== 0 in calculated“main”

适用于我的其他路线，如“/ dashboard”等，但出现在所有路线中。我基本上希望这个模板只在url为“/”时出现。在整个项目中尝试过，只是梅花不起作用。请帮助和谢谢！任何建议。

<template v-if="main"> 
    <div id="accordion-nav"> 
    <div class="accordion-panels"> 
     <a href="/dashboard">Dashboard <i class="fa fa-caret-right" aria-hidden="true"></i></a> 
    </div> 
    <div class="accordion-panels"> 
     <a href="/shifts">Shifts <i class="fa fa-caret-right" aria-hidden="true"></i></a> 
    </div> 
    <div class="accordion-panels"> 
     <a href="/other">Other <i class="fa fa-caret-right" aria-hidden="true"></i></a> 
    </div> 
    </div> 
</template> 

<script> 
export default { 
    name: 'accordion-nav', 
    computed: { 
    main: function() { 
     return this.$route.path.indexOf('/') === 0 
    } 
    } 
} 
</script> 

<style scoped> 
</style>

来源

2017-07-08 Teoman Kirac

这是一个单独的组件。你在哪里使用这个组件？ –

'' –

用于格式化有@VamsiKrishna抱歉，我把它在我sidebar.vue组件。已经尝试过也没有运气。 –

设置在侧边栏组件本身

'<template> 
    <div id="sidebar" class="sidebar" 
    :class="{ isOpen: isOpen }"> 
    <div class="sidebar-opener" 
     @click="toggle">{{openerText}}</div> 
    <accordion-nav v-if="main"></accordion-nav> 
    <accordion></accordion> 
    </div> 
</template>' 

<script> 
export default { 
    data() { 
    return { 

     } 
    }, 
    computed:{ 
     main(){ 
      return this.$route.path === '/' 
     } 
    } 
} 
</script>

的v-if随着this.$route.path你，等于解决了在您的应用程序的任何组件绝对路径当前的路由路径的字符串。所以你可以用它来检查您是否在根路径使用：

this.$route.path === '/'

这里是example fiddle

来源

2017-07-08 11:47:42

谢谢！奇迹般有效：） –

使用v-if="main"的方法v-if="main()"，而不是计算的财产

methods: { main: function() { return this.$route.path.indexOf('/') === 0 }

方法做这样复杂的更新速度比计算性能要好得多。计算=懒

来源

2017-07-08 11:44:06 Reiner

感谢Reiner，这也是可能的工作，但是尝试了Vamsi的第一个问题，因为问题被要求提供组件。 –

template v-if =“main”，not working with this this。$ route.path.indexOf（'/'）=== 0 in calculated“main”

回答

相关问题