Vue.js v-if表示/非表示の切り替えの場合

Question

ボタンをクリックすると表示/非表示に切り替えることができます。誰かが私がここで間違っていることを教えてもらえますか？私はまだVueを学んでいますので、どんな助けもありがとうございます。ありがとう。

はここnavigation.vueからのコードです：App.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> 

：コンポーネントと

<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 
    } 
}