たいさブログ

taisa's engineer blog

JavaScript

Vue.jsで外部APIを使ったTODOリストを作ってみた

投稿日:2019年8月14日 更新日:


APIを使ったTODOリストをVue.jsで作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTODOリストのAPIを作ってみた」を利用します。CORSを全て許可しているのでどこからでも叩けるようになっています。

できたもの

できたものはこちらです。http://vuejs.taisablog.com/todo

APIのエンドポイント

APIのエンドポイントは以下としました。

TODOリストの処理

プロジェクトはvue-cliで作成し、APIはaxiosを利用しました。componentsTodo.vueファイルを作成しそこにすべての処理を書いています。

インポート

data function

created function

methods : 一覧を取得する

methods : タスクを追加する

methods : タスクを削除する

methods : タスクを完了にする

HTML

Todo.vue全部

HTMLとスタイルはあえてフレームワークを使わず自力で作成したのでボロボロです。

ソース

ソースはこちらにあがっています。
https://github.com/taisa831/sandbox-vuejs

まとめ

もっとスマートな書き方があるかしれませんが、これで一通り動作するようになりました。次はこれをTypeScriptに書き換えたものを作成する予定です。HTMLとCSSに一番時間がかかったのでもっとスマートにさらっと書けるようになりたいです。


-JavaScript

執筆者:

関連記事

Firebase Cloud Firestore 使い方の勘ドコロ

FirebaseのCloud Firestoreを扱う際、本家ドキュメントが充実していて検索すればすぐに出てくるのでそれほど困ることはありません。ただ、最初の入りとしてFiresotreのDocume …

no image

Vue.js+TypeScriptで外部APIを使ったTODOリストを作ってみた

Vue.jsで外部APIを使ったTODOリストを作ってみた に続き、それのTypeScript版を作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTOD …

node-nightlyを使ってwebpackをデバッグする

webpackに限らずだけどnode-nightlyを使うと簡単にデバッグすることができる Debugging When contributing to the core repo, writing …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月 …

Nuxt.js v2.9のリリース情報とDiff

2019年8月20日にNuxt.jsのバージョンが2.8.1から2.9へがリリースされました。2019年9月19日時点ではバージョン2.9.2まであがっています。本投稿ではリリース内容と変更点が見れる …

Top