適当雑記帳

ITの話、映画の話、筋トレの話などを発信しています。

vue.jsの理解を深めるためページネーション実装してみた ※2.x系

多分これが一番簡単と思います

内容を簡単に説明

機能

  • リスト追加
  • リスト削除
  • ページング

data

  • list
    • すべてのオブジェクトを格納
  • name
    • formの入力データを格納
  • currentPage
    • 現在表示しているページ

computed

  • getSmallList
    • listから現在ページの要素を抽出
    • 表示対象のみ抽出
  • isMaxPage
    • 現在ページが最大ページか判定
    • 最大ページなら「次へ」を押せなくする
      1. 最初は全1ページ中1ページ目なのでtrue
      2. listにaddして全体のページが2ページになれば、そのタイミングでfalse
      3. 2ページ目に移動するとcurrentPageがインクリメントされ、そのタイミングでtrue
  • computedで定義するとメソッド内で使用している要素に変更があったら勝手に再計算が走る!!
    • getSmallListはlistに変更があった際に自動で更新される
      • listにaddしたときや削除したときに、getSmallListも再計算されるので画面の内容が変わる!
    • isMaxPageは listに変更があった際or現在ページに変更があった際に自動で更新される

methods

  • destroy
    • listから一番後ろの要素削除(削除ボタン押したとき)
  • addObj
    • listの最後にnameの内容を格納(formがsubmitされたとき)
  • nextPage
    • 次のページへ移動(次へボタン)
  • prePage
    • 前のページへ移動(前へボタン)

気をつけるところ

  • 最初は「次へ」ボタン、「前へ」ボタンをなんとなくaタグにしていた
  • aタグだとdiabledが効かない。(cssでdisableクラスを作るなどする必要がある。。)

結論

  • vue.jsだと簡単に実装できた!

wri.peで削除できないorz

WEB上のmarkdownエディタの話題です。

wri.pe

  • もともとはwri.peを使っていました。 wri.pe

  • ちゃちゃっとメモしたいとき便利でした。githubアカウントに紐付ければ、他の端末などからもチェックできます。

  • dropboxとかに保存しなくても、ファイル保存がいっぱいできたりでした。
  • ただ今年?くらいからメモの削除ができなくなりました
  • 個人的なメモとかも残していたので、削除できないのはちょっと嫌でした。(そもそも個人的なメモをそんなとこに残すのはよくなさそう)

classeur

  • 移行先を探してたら、たまたま見つけました。 app.classeur.io

  • stackeditは前に少し触ってたのですが、なんか連携うまくできねーでやめてました。

  • これがstackeditの後継みたいです。(ネットで見かけた情報なんで、ほんとかどうかは知りません。。)
  • googleアカウントに紐付ければwripeと一緒で、別端末とかでもメモ確認できるし、軽いし、便利です。
  • UIはかっこいいけど、もっとシンプルでも自分はいいかなぁと思います。
  • ということでしばらくこっち使います。

  • wripeからの移行先を探している人の参考になればいいなと思います。

2018/02/22追記

f:id:watabean:20180222234135p:plain こんなのが出始めた。。 classeurはサービス終わるみたいです。 stackeditに移行しましょうねーとのこと。。残念\(^o^)/

どれ使おう。。