Laravel+Vue/Vuetify 編集機能を追加

2020-06-172022-10-09

前回までで登録・一覧・削除ができたので今回は編集機能を作ります。
Actionsのペンアイコンをクリックしたときに該当データの編集画面を表示しデータの変更ができるようにします。すでに登録用のコンポーネントにフォームがあるので共有化しましょう。

開発環境

Laradock v10
Laravel 7
Vue 2.6

Laravel：コントローラーにメソッド実装

showメソッドで指定されたIDのデータを返します。
updateメソッドで指定されたIDのデータを更新します。

    public function show($id)
    {
        $status = 200;
        $message = null;

        $data = null;
        $item = Item::find($id);
        if ($item) {
            $data = $item;
            $data['checkbox'] = explode(',', $data['checkbox']);
        } else {
            $status = 404;
            $message = 'Not Found.';
        }

        return response()->json(['item' => $data, 'status' => $status, 'message' => $message]);
    }

    public function update(ItemRequest $request, $id)
    {
        $status = 200;
        $message = null;
        $result = false;

        $data = $request->all();
        $data['checkbox'] = implode(',', $data['checkbox']);
        $item = Item::find($id);
        if ($item) {
            $result = $item->fill($data)->save();
        } else {
            $status = 404;
            $message = 'Not Found.';
        }

        return response()->json(['result' => $result, 'status' => $status, 'message' => $message]);
    }

※updateメソッドのリクエストは登録で使用したItemRequestを利用してバリデーションに対応します。
※Laravel側でエラーを出すとJavascriptが止まってしまうのでエラーとして返してJavascript側で処理することにします。

コンポーネント名を変更

フォームのコンポーネントはItemAddComponent.vueになっていましたが、共有化するためにitemEditComponet.vueに変更しましょう。

resources/js/components/User/ItemAddComponent.vue
↓
resources/js/components/User/ItemEditComponent.vue

Vue-Routerの変更

フォームの共有化のため、Vue-Routerの設定を変更します。

// import UserItemAdd from './components/User/ItemAddComponent'
import UserItemEdit from './components/User/ItemEditComponent'	// 変更

・・・

//        {
//            path: '/user/item/add',
//            name: 'user-item-add',
//            component: UserItemAdd,
//        },
        // 上記コードを以下に変更
        {
            path: '/user/item/edit/:id(\\d+)?',
            name: 'user-item-edit',
            component: UserItemEdit,
        },

※id付きでアクセスされたときはそのidでデータを呼び出して編集フォームに、idが無かったときは登録フォームにしたいと思います。

ItemComponentのリンク先変更

新規登録ボタンのリンク先変更

idを指定しない形で/user/item/editへ！

  <router-link to="/user/item/add">
    <v-btn>新規登録</v-btn>
  </router-link>
↓
  <router-link to="/user/item/edit">
    <v-btn>新規登録</v-btn>
  </router-link>

ペンアイコンを編集画面へのリンクに

上記、router.jsの設定により、router-linkでnameをuser-item-edit、paramにidを与えることで/user/item/edit/{id}にリンクしてくれます。

      <v-icon
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
↓
      <router-link :to="{ name: 'user-item-edit', params: { id: item.id } }">
        <v-icon
          class="mr-2"
        >
          mdi-pencil
        </v-icon>
      </router-link>

ItemEditComponentの修正

ItemAddComponent.vueから名前を変更してItemEditComponent.vueにしたので内容を修正します。
resources/js/components/User/ItemEditComponent.vueの変更です。

タイトルの変更

v-ifを使ってforms.idの有無でタイトルの切り替え

  <h1>UserItemAdd</h1>
  ↓
  <h1 v-if="forms.id == ''">UserItemAdd</h1>
  <h1 v-else>UserItemEdit</h1>

formsにid追加

dataオブジェクトformsにidを追加します。

<script>
  export default {
    data() {
      return {
・・・
        forms: {
          id: '',			// 追加
          textbox: '',
          textarea: '',
          radiobtn: '1',
          select: '',
          checkbox: [],
        },
・・・

created()でItemデータ取得

ItemComponent.vueのリンクでparamを設定しましたが this.$route.params.id で取得することができます。これを利用してidが存在するときだけAxiosでItemデータを取得してformsに設定します。

     created() {
     ・・・
     // 以下追加
      if (this.$route.params.id) {
        this.forms.id = this.$route.params.id;
        axios.get('/ajax/user/item/' + this.$route.params.id).then((res) => {
          if (res.data.status == 200) {
            const item = res.data.item;
            item.radiobtn = item.radiobtn.toString()
            item.select = item.select.toString()
            this.forms = item;
          } else {
            // エラー処理
          }
        })
        .catch(function(error) {
          console.log(error)
          // エラー処理
        })
      }

※ここまでで編集フォームに変更するItemデータを設定するところまでできました。

methodsのsubmit()での送信先切り替え

送信ボタンを押したときの送信先もAxiosのメソッドの切り替えが必要です。
forms.idが空でなければ更新なので
putメソッドで送信先は/ajax/user/item/[変更するデータのID]
空なら登録で
postメソッドで送信先は/ajax/user/item
ですね。

        // 送信処理
        let ajax;
        if (this.forms.id) {
          // 更新
          ajax = axios.put('/ajax/user/item/' + this.forms.id, this.forms);
        } else {
          // 新規登録
          ajax = axios.post('/ajax/user/item', this.forms);
        }
        ajax.then((res) => {
        ・・・