Nuxt-Laravel_CRUDアプリで削除機能をつける

[shogosakihama]

リポジトリ

Nuxt

初めはこんな感じで実装 ~ Nuxt ~ feature/id 0番目の配列（記事）を削除する＿成功~ Nuxt ~ feature/key_id

Laravel

初めはこんな感じで実装 ~ Laravel ~ feature/id 0番目の配列（記事）を削除する＿成功~ Laravel ~ feature/key_id

[shogosakihama]

なかなか問題が解決しないので、こちらで問題記述したい。

[shogosakihama]

やろうとしていること

Nuxt-LaravelでCRUD機能をもつアプリを作りたいと思った。 記事を投稿することはできたので、次は削除機能をつけたい。 しかし削除することはできない。 いろいろ試したら、key[0]の記事を削除できるようになった。

でも削除機能、改善したい。

[shogosakihama]

初めはこんな感じで実装 ~ Nuxt ~

index画面に記事一覧を表示。それぞれに削除ボタンもつけます。

axios.getで記事を取得して・・・ 取得したデータはjson_dataに格納されます。

  asyncData: async function({ $axios }) {
    let { data } = await $axios({
      method: "get",
      url: "http://localhost:8000/api/"
    });
    return { json_data: data.posts };
  },

取得したデータをfor文で展開しています。 ボタンは@clickでremoveメソッドを発火します。 このitem.idをAPI(Laravel)側に送って削除することができれば理想的だが・・・

<ul v-for="(item, key) in json_data" :key="key">
        <li class="font-bold p-2> id: {{ item.id }}</li>
        <li class="font-bold p-2">title: {{ item.title }}</li>
        <li class="font-bold p-2">text: {{ item.text }}</li>
        <li class="text-right btn">
          <button
            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-t-lg sm:mt-5"
            type="button"
            @click="remove"
          >
            削除する
          </button>
        </li>
        <li class="border-b-2 border-blue-100 sm:mb-5"></li>
      </ul>

データはこのようになっていて・・・

data: function() {
    return {
      id: "",
      json_data: []
    };
  },

removeメソッドはこのようになっています。 削除が成功すると"success"とコンソールに表示される。 そしてリダイレクトされる。

methods: {
    async remove() {
      this.$axios.post("http://localhost:8000/api/remove", {}).then(res => {
        console.log("success");
        location.href = "/";
      });
    }

しかしボタンを押すと500エラーが返ってきます。

POST http://localhost:8000/api/remove 500 (Internal Server Error)

[shogosakihama]

初めはこんな感じで実装 ~~ Laravel ~~

ルート、、、

Route::match(["post", "options"], 'remove', 'AxiosPostController@destroy');

コントローラー、destroyメソッド "test"とログに書き出す処理も追加しています。 この処理の前にエラーになるのか、それとも後にエラーが出るかで問題の箇所を判断します。

  public function destroy($id)
  {
    \Log::info('test');

    $post = Post::find($id);

    $post->delete();
  }

Laravelのログに"test"と書き出されていません。 その前にエラーになっています。必要な値を渡せていません。

[2020-06-07 13:07:33] local.ERROR: Too few arguments to function App\Http\Controllers\AxiosPostController::destroy(), 0 passed and exactly 1 expected {"exception":"[object] (ArgumentCountError(code: 0): Too few arguments to function App\\Http\\Controllers\\AxiosPostController::destroy(), 0 passed and exactly 1 expected at /Users/shogo_sakihama/Desktop/laravel/laravel_VM_ver.2/laravel-api/app/Http/Controllers/AxiosPostController.php:42)

[shogosakihama]

次は配列のキーを元にidを取り出す方法を試しました。 とりあえず0番目の配列（記事）を削除することはできました。

[shogosakihama]

0番目の配列（記事）を削除する＿成功~ Nuxt ~

こちらfor文に関しては同じ。

    <ul v-for="(item, key) in json_data" :key="key">
        <li class="font-bold p-2">id: {{ item.id }}</li>
        <li class="font-bold p-2">title: {{ item.title }}</li>
        <li class="font-bold p-2">text: {{ item.text }}</li>
        <li class="text-right btn">
          <button
            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-t-lg sm:mt-5"
            type="button"
            @click="remove"
          >
            削除する
          </button>
        </li>
        <li class="border-b-2 border-blue-100 sm:mb-5"></li>
    </ul>

データも同じです。 ちなみにidに直接idの値を書き込んでも削除できます。

data: function() {
    return {
      id: "",
      json_data: []
    };
  }

算出プロパティで値を変更しています。 jason_dataの0番目の配列(記事)を取り出して、dataのjson_dataに格納します。 ちなみにthis.idに直接idの値を代入しても削除できます。

computed: {
    getId: function() {
      this.id = this.json_data[0].id;
    }
  },

idを受け取っています。

async remove() {
      this.$axios
        .post("http://localhost:8000/api/remove", {
          id: this.id 
        })
        .then(res => {
          console.log("success");
          location.href = "/";
        });
    },

気になる点

dataの値をメソッドに渡すことでとりあえず削除できているが、入力フォーム(?)から直接値をメソッドに遅れないのだろうか。

[shogosakihama]

0番目の配列（記事）を削除する＿成功~ Laravel ~

$idではなく$requestで値を渡しています。

  public function destroy(Request $request)
  {
    \Log::info('test');

    $post = Post::find($request->id);

    $post->delete();
  }

ログに"test"と書き出されるし、削除もされます。 $requestにidを渡せれば機能するので、Nuxt側の問題と思っています。

[shogosakihama]

なるほど、v-forで作ったそれぞれのボタンを、それぞれの記事と結びつけることができればいいのか。

[shogosakihama]

itemに格納されているitem.idをボタンでも表示して確認。やはりデータは受け取れている。 このidだけを取り出せたらいいんだよな。 ボタンを押すとこのidがdataのidに表示されるのことに挑戦しよう。

それができれば、そのidをメソッドで送ればいいだけだろう。

[shogosakihama]

しかしVue Router/queryパラメーターの利用も勉強しよう。 【Nuxt.js】Vue Router復習編：params, queryを使おう

[shogosakihama]

/_id/params_query_practice パラメーターで値を渡せるだろうか。

[shogosakihama]

削除機能の実装に成功した。 queryでidを算出プロパティに渡し、それをdataに反映させ、removeメソッドで削除した。

      <button type="button"
            @click="$router.push({ path: '/', query: { id: item.id } }); remove()">
            削除する
      </button>

onclickで2つの処理をしている。

• queryでidを渡す
• removeメソッドを発火する

  
  data: function() {
  return {
    id: "",
    text: "",
    json_data: []
  };
  },

computed: { getId: function() { this.id = this.$route.query.id; } },

渡されたqueryのidをdataに格納する。

async remove() { this.$axios .post("http://localhost:8000/api/remove", { id: this.id }) .then(res => { console.log("test"); location.href = "/"; }); },

removeメソッドでLaravelのdeleteメソッドに送る。

[shogosakihama]

絞り込み機能もつけるか。 Vuexを使って絞り込み機能を実装してみた