Nuxt.jsを勉強中なのですが、どう試行錯誤してもv-showが機能しません。

Question

以下のコードはcomponentsのNav.vue中のコードです。

<style>コードは関係ないと思い、省略しています。 **default.vue**にimportしています。 ```ここに言語を入力 <!-- ハンバーガーメニュー --> <div id="navbtn" v-on:click="navOpen"> 　　　　<p class="one"></p> 　　　　<p class="two"></p> 　　　　<p class="three"></p> </div> <!-- ハンバーガーメニュー エンド--> <!-- ナビゲーションの中身 --> <div v-show="navflg"> 　　　　<h1>aaaaaa</h1> 　　　　<p>bbbbbb</p> 　　　　<p>ｃｃｃｃｃｃ</p> </div> <!-- ナビゲーションの中身 エンド--> <script> export default{ name:'SideButton', data: function() { return { navflg:false }; }, methods:{ navOpen:function(){ this.navflg != this.navflg; } } } </script>

<style　scoped>
....

<style> ``` 理想的なのは、ハンバーガーメニューをクリックすると、ナビゲーションの中身が表示されることです。 しかし、上記のコードだとクリックしても表示がされません。 **navflg**の値を**true**にすると、もとから表示されます。 そのため、data設定の書き方は問題ないのだと思っています。 あとはmethodsの書き方が不適切であることが考えられるのですが、知識不足ゆえに自身で解決できません。 ど初心者に是非とも、解決策を教えていただけないでしょうか。 よろしくお願い致します。 nuxtのversion 2.0.0 npm のversion 6.12.0

Answer 1

おそらく、このコードが原因だと思います。
この書き方だと真偽値は反転しないので、

navOpen:function(){
    this.navflg != this.navflg;
}

こう書いてみてください。

navOpen:function(){
    this.navflg = !this.navflg;
}

その他に気になった点として、これだとブラウザ上では見えないので

<div id="navbtn" v-on:click="navOpen">
    <p class="one"></p>
    <p class="two"></p>
    <p class="three"></p>
</div>

テキストを書いてみてください。これでクリックしやすくなると思います。

<div id="navbtn" v-on:click="navOpen">
    <p class="one">ONE</p>
    <p class="two">TWO</p>
    <p class="three">THREE</p>
</div>

あとは、問題ないかもしれませんが、この書き方はLintの設定ではエラーになると思いますので

data: function() {
    return {
        navflg:false
    };
},
methods:{
    navOpen:function(){
        this.navflg != this.navflg;
    }
}

こう書いてみてください。

data() {
    return {
        navflg:false
    }
},
methods: {
    navOpen(){
        this.navflg = !this.navflg
    }
}

Comments

[ff7575]

大変丁寧なご回答をしていただき、感謝しかございません。
本当にありがとうございました。
しっかりと身に染み込ませていただきます。

[rubytomato]

私もVue.jsとNuxtを勉強中の身ですので、お役に立ててよかったです。

[ff7575]

1時間30分ほど、悩み死んでいたので、本当に助かりました。
ありがとうございました。