Vue.js + Laravelで記事一覧を作成する(フロント編 #3)

Vue.js + Laravelで記事一覧を作成する(フロント編 #3)

こんにちは、ラクミニです。 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からもお待ちしております。

一覧へ戻る

最新記事