Buefy nuxt Vue

Vue/Nuxtのプロパティをリアルタイムで変更バインディング

Buefyで、モバイルのときにスライドインしてくるサイドバーを作っていたとき、どうしてもスムーズにサイドバーを表示できなかったことがあった。

(1回目はスムーズに開くけど、2回目以降、なぜか表示ボタンを2回クリックしなければならなかった。)

調べたら、ここにやり方書いてあった。

https://jp.vuejs.org/v2/guide/components-custom-events.html

Buefyのサイドバーをベースに例を書きます。

だめな例

※これだとリアルタイムにバインディングされないです。

<b-sidebar

        :open="sidebar.open"

      >

</b-sidebar>

いい例

<b-sidebar

        :open.sync="sidebar.open"

      >

</b-sidebar>