vue.jsとapollo、graphQLの学習用に、CRUD機能(create、read、update、delete︶を持つ名簿アプリを作りました。 実装をチュートリアル形式でまとめます。 バックエンドはgraphQLのAPIサーバーであるGraphCMSというヘッドレスCMSを使っています。 概要 CRUD機能を持つ名簿アプリを作成します。 右上のボタンから名簿の追加。 各レコード右側のボタンで更新、削除が行えます。 さらにvuetifyのdata-tableの機能ですが、並び替えやページングも行えます。 デモサイトはこちら︵追加更新削除やってみて大丈夫です。︶ https://vue-sample-crud.firebaseapp.com/ 全コードはこちら https://github.com/kawamataryo/vue-apollo-crud バージョン情報 vue-cli
![vue.js, Apollo, graphQLで名簿アプリを作成する(CRUD機能の実装サンプル)](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6dafc2a4bbec6294984944e470465e7203b36b1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9dnVlLmpzJTJDJTIwQXBvbGxvJTJDJTIwZ3JhcGhRTCVFMyU4MSVBNyVFNSU5MCU4RCVFNyVCMCVCRiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNCVCRCU5QyVFNiU4OCU5MCVFMyU4MSU5OSVFMyU4MiU4QiVFRiVCQyU4OENSVUQlRTYlQTklOUYlRTglODMlQkQlRTMlODElQUUlRTUlQUUlOUYlRTglQTMlODUlRTMlODIlQjUlRTMlODMlQjMlRTMlODMlOTclRTMlODMlQUIlRUYlQkMlODkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTUwYmZkMThlYTY0MWRjNDUzMmYwODQyZWYxNjUyNGMz%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcnlvMjEzMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NmVkYTM4NDRmZDdmNTk3MTI1NzE4ODBjMjBkZjE1MTQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D05afdd2dd1471fec56f8c7731ddf4920)