こんにちは、ラクミニです。 Vue.js+Laravelも最終回です。今回は、記事一覧に投稿・編集・削除機能を実装します 。
今までの投稿はこちら↓
https://enjoyworks.jp/tech-blog/5569
https://enjoyworks.jp/tech-blog/6014
https://enjoyworks.jp/tech-blog/6270
1.削除機能の実装
では、削除機能を実装していきます。まずはhtmlにbuttonタグを追加します。
<div class=”card card-body mb-2″ v-for=”article in articles” v-bind:key=”article.id”>
<h3>{{ article.title }}</h3>
<p>{{ article.body }}</p>
<button @click=”deleteArticle(article.id)” class=”btn btn-danger”>削除</button>
</div>
そして、script内に削除用メソッドdeleteArticleを追加します。makePaginationメソッドの後に追加しましょう。
deleteArticle(id) {
if (confirm("削除しますか？")) {
fetch(`api/articles/${id}`, {
method: "delete"
})
.then(res => res.json())
.then(data => {
alert("記事を削除しました。");
this.fetchArticles();
})
.catch(err => console.log(err));
}
「削除しますか？」の確認メッセージを表示し、OKだったらapiを呼び出して削除処理を実行します。削除が完了したら「記事を削除しました。」のメッセージを表示し、一覧を取得しなおします。エラーはコンソールに出力します。
では、「npm run dev」を実行してファイルをコンパイルしましょう。そして、ブラウザを更新します。
削除ボタンが表示されました！続いて、ボタンをクリックしてみます。
確認メッセージが表示されましたね。O Kを押してみましょう。
メッセージが表示されました！
そして、一覧も更新されましたね。
2.投稿機能の実装
続いて、投稿機能を実装します。H2タグの下にformを追加します。
<form @submit.prevent=”addArticle” class=”mb-3″>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”タイトル” v-model=”article.title” />
</div>
<div class=”form-group”>
<textarea class=”form-control” placeholder=”本文” v-model=”article.body”></textarea>
</div>
<button type=”submit” class=”btn btn-light btn-block”>保存</button>
</form>
そして、scriptにaddArticleメソッドを追加します。
addArticle() {
if (this.edit === false) {
// add
fetch(`api/articles`, {
method: "post",
body: JSON.stringify(this.article),
headers: {
"content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
this.article.title = "";
this.article.body = "";
alert("記事を追加しました。");
this.fetchArticles();
})
.catch(err => console.log(err));
} else {
// update
}
}
記事を投稿する処理をif文の中に書きます。Apiを呼び出して登録処理を実行します。処理が成功したら「記事を追加しました。」のメッセージを表示し、一覧を取得し直します。
再び「npm run dev」を実行してコンパイルします。そして、ブラウザを更新しましょう。
画面の上部「ブログ」の下にフォームが追加されました。
試しに投稿してみます。
無事に投稿できました！
3.編集機能の実装
最後に、編集機能を追加します。削除ボタンの前に編集ボタンを追加します。
<div class=”card card-body mb-2″ v-for=”article in articles” v-bind:key=”article.id”>
<h3>{{ article.title }}</h3>
<p>{{ article.body }}</p>
<hr />
<button @click=”editArticle(article)” class=”btn btn-secondary mb-2″>編集</button>
<button @click=”deleteArticle(article.id)” class=”btn btn-danger”>削除</button>
</div>
続いて、scriptにeditArticleメソッドを追加します。編集ボタンをクリックしたら、フォームのテキストボックスに値をセットします。
editArticle(article) {
this.edit = true;
this.article.id = article.id;
this.article.article_id = article.id;
this.article.title = article.title;
this.article.body = article.body;
}
一旦「npm run dev」を実行し、動作を確認します。
先ほど追加したテスト投稿の編集ボタンをクリックします。
フォームにセットされました。最後に、編集した内容を保存する処理をaddArticleメソッドのelseの中に追記します。
addArticle() {
if (this.edit === false) {
// add
fetch(`api/articles`, {
method: "post",
body: JSON.stringify(this.article),
headers: {
"content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
this.article.title = "";
this.article.body = "";
alert("記事を追加しました。");
this.fetchArticles();
})
.catch(err => console.log(err));
} else {
// update
fetch(`api/articles`, {
method: "put",
body: JSON.stringify(this.article),
headers: {
"content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
this.edit = false;
this.article.id = "";
this.article.article_id = "";
this.article.title = "";
this.article.body = "";
alert("記事を更新しました。");
this.fetchArticles();
})
.catch(err => console.log(err));
}
},
では、「npm run dev」を実行し、テスト投稿を編集、保存しましょう。
投稿を編集して保存までできました！
これで記事の表示〜削除まで最低限必要な機能を一通り実装することができました。
エンジョイワークスでは、一緒に働くデザイナー・エンジニアを募集中です！
採用情報はこちら。
Wantedlyからもお待ちしております。
