Vue js 2隱藏共享組件

<template> 
<div id="app" class="phone-viewport"> 
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 
    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 

    <router-view></router-view> 
    <bottomBar v-bind:visibles='show' ></bottomBar> 

</div> 
</template> 

<script> 
export default { 

    name: '', 
    show: '', 

    data() { 
    return { 
     visibles: [ 
     {name: 'Football', show: true}, 
     {name: 'Basketball', show: true}, 
     {name: 'Hockey', show: true}, 
     {name: 'VolleyBall', show: false}, 
     {name: 'Baseball', show: false}, 

     ] 
    } 
    } 
} 
</script>

我正在尋找隱藏bottomBar只在VolleyBall和Beisbol。但我一直有這樣的錯誤「屬性或方法‘秀’是不是在實例中定義，但在引用的渲染。確保在數據選項聲明反應數據屬性。」Vue js 2隱藏共享組件

<script> 
export default { 

    name: 'app', 

    data() { 
    return {} 
    }, 
    computed: { 
    hideBottom: function() { 
     if (this.$router.path === '/baseball' || this.$router.path === '/volleyball') return false 
     else { return true } 
    } 
    } 
}

來源

2017-06-28 user3380738

沒有它幫助你或給予好評是從別人？ –

棒球
您正在調用不存在的方法顯示，這就是您遇到錯誤的原因。
據我瞭解你的問題，你想隱藏在特定路線的組件？
如果是這樣，您需要創建computed變量，它將決定是否應該顯示它。例如爲：

computed: { 
    toShowOrNotToShow: function() { 
     if(this.$router.path === '/baseball' || this.$router.path === '/volleyball') return false; 
     else 
      return true; 
    } 
    }

只是用它：<bottomBar v-if='toShowOrNotToShow' ></bottomBar>

來源

2017-06-28 09:48:50

我嘗試你的代碼，但它仍然顯示bottomBar，我應該在腳本標記中聲明一些方法嗎？ – user3380738

看起來你不知道如何計算工作。您需要將我的代碼放入腳本標記中。看看docs.https：//vuejs.org/v2/guide/computed.html –

是的，我已將它添加到

相關問題

Vue js 2隱藏共享組件

回答

相關問題