Vue.js v-if切換顯示/隱藏導航

Question

我想製作一個導航，您可以通過單擊按鈕來顯示/隱藏切換。任何人都可以告訴我我在這裏做錯了什麼？我仍然在學習Vue，所以任何幫助將不勝感激。謝謝。

下面是navigation.vue代碼：

<template> 
    <div> 
    <nav v-if="seen"> 
     <ul> 
      <li><a href="#front">front</a></li> 
      <li><a href="#contact">contact</a></li> 
     </ul> 
    </nav> 
     <p><button v-on:click="seen = !seen">Toggle</button></p> 
    </div> 
</template> 

<script> 
    export default { 
     data: { 
     seen: true 
     } 
    } 
</script> 

導入導航App.vue：

<template> 
    <main> 
    <app-navigation></app-navigation> 
    <app-front></app-front> 
    <app-footer></app-footer> 
    </main> 
</template> 

<script> 
    import Navigation from './components/navigation.vue' 
    import Front from './components/front.vue' 
    import Footer from './components/footer.vue' 

    export default { 
     components: { 
     'app-navigation': Navigation, 
     'app-front': Front, 
     'app-footer': Footer 
     }, 
     data() { 
     return { 
     } 
     } 
    } 
</script> 

Answer 1

隨着零件，您data財產必須是一個函數。

data(){ 
    return { 
    seen: true 
    } 
}