Vue.jsでボタンを押したらLaravelに値を送れるようにしたい

Question

前提

vue.jsで画面をlaravelでバックエンドの処理を行う
サービスを開発しています。
画面の初期表示時にDBの検索結果を配列にして
画面のbladeファイルからjsonでvue.jsのコンポーネントに送って表示しています。
vue.js上のボタンを押下したらlaravelから受け取った配列の値を
laravelにPOSTしてDBを更新したいです。

実現したいこと

• vue.js上のボタンを押したら値が送られ、その値を使ってDBを更新する

発生している問題・エラーメッセージ

該当のソースコード

@include('header')
<main class="l-main">
    <div class="l-form">
            <div id="app">
                <panel-component  :comeback-accounts='@json($comebackAccounts)'></panel-component>
            </div>
    </div>
</main>

@include('footer')

<template>
    <div class="c-textbox__header u-text__title">凍結解除されたアカウント
        <div v-if="comebackAccounts && comebackAccounts.length">
            <div v-for="comeback in comebackAccounts">
                <table class="c-table">
                    <tr>
                        <th>アカウント名</th>
                        <td v-model="twitter_screen_name">{{ comeback.twitter_screen_name }}</td>
                    </tr>
                </table>
            </div>
            <el-button v-on:click.once="onPost(comeback.twitter_screen_name)" type="info" plain>自動機能を再開する</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        comebackAccounts: Array,
    },
    data() {
        return {};
    },
    methods: {
        onPost: function () {
            axios.post("/comeback", {
                twitter_screen_name: this.twitter_screen_name,
            },).then((response) => {
                // ちゃんと送信できたか確認用
                console.log(response);
            })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
}
</script>

        public function comeback(Request $request){

            $twitter_screen_name = $request->input('$twitter_screen_name');
            Log::debug($twitter_screen_name);
            DB::table('twitter_tokens')
                ->where('twitter_screen_name', $twitter_screen_name)
                ->update(['suspended_flg' => SuspendedFlg::getValue('正常')]);
            return redirect('/home')->with('c_flash', '凍結解除しました！');
        }

試したこと

laravelからJSONで受け取った配列の値をlaravelにPOSTすることは可能でしょうか？

補足情報（FW/ツールのバージョンなど）

Laravel v8.83.23
PHP v7.4.18
"vue": "^3.2.36",

Answer 1

<div class="media" style="margin-top:20px;" v-for="[comment in comments](https://www.blueeliteesports.com/profil/uebertragung-bvb-fc-bayern-live-im-tv-stream-08-10-2022-999102-b/brukerprofil?aldbc=)"> <div class="media-left"> <a href="#"> <img class="media-object" src="http://placeimg.com/80/80" alt="..."> </a> </div> <div class="media-body">

                 <h4 class="media-heading">@{{comment.user.name}} said...</h4>
                     <p>
                        @{{comment.text}}
                     </p>
                      <span style="color: #aaa;">on @{{comment.created_at}}</span>

                     <p>
                     @{{comment.id}}
                     </p>
                       <button class="btn btn-default" v-on:click="deleteComment('@{{comment.id}}')">Delete comment</button>

Comments

[ttpk]

ご回答ありがとうございます

```
v-on:click="deleteComment('@{{comment.id}}'
```
で値を送れるんですね

Answer 2

Laravelには疎いのですが、ざっと見てみて「おや？」と思うところがいくつかあったので回答してみます。

一応、送信したいデータは「comebackAccountsに含まれる特定の（例えば対応するボタンを押した）要素のtwitter_screen_name」という想定ですが、もし違っていたらすみません。

---

まず、comebackを参照しているel-buttonが、v-forを指定しているdivの外側にあるため、<el-button>をdivの中に入れてcomebackを参照できるようにします。

イメージ：

<!-- div が comebackAccounts の要素数分、生成される -->
<div v-for="comeback in comebackAccount">
  <!-- v-for がついた要素の中でしか comeback は参照できない -->
  <el-button @click.once="onPost(comeback.twitter_screen_name)">〜</el-button>
</div>

なお、v-on:〜には@〜という省略記法があるので、そちらを使用しています。

• テンプレート構文 | Vue.js

（<div class="c-textbox__header u-text__title">に対応する</div>の位置も凍結解除されたアカウントの直後のような気もしますし、恐らく色々試されているうちに諸々の要素の位置がズレていたのではないかと愚推します）

ご質問のコードでは、1行だけのtableを各要素ごとに生成する実装になっていますが、こういう時はヘッダーをtheadで定義してtbody内のtrにv-forを付けると見やすく、かつ無駄も少ないと思います。
さらに、v-forを使う時はできるだけ:keyも設定してあげると、更新の度に表示順序が崩れず、よいでしょう。

同時に、v-ifもtableにつけ直しましたが、comebackAccountsの要素数が0の場合はテーブル自体も表示されなくなるので、デザインなどの問題があればv-ifを付けたdivでtableを囲うやり方に戻してください。

• リストレンダリング | Vue.js

また、tdにv-modelで値を指定しようとしていますが、値を表示するだけなら指定する必要はないと思います。
{{〜}}を使うだけでも元の値（comebackAccounts）が更新されたらUIは再レンダリングされ、表示が自動で更新されます（「プロパティ→UI」の単方向バインディング）。
v-modelは値を表示するだけでなく、input要素などユーザが入力した値をプロパティに反映したい時に使います（「プロパティ↔UI」の双方向バインディング）。

• テンプレート構文 | Vue.js - 値の表示と自動更新について
• フォーム入力バインディング | Vue.js - v-modelとその使い所について

それから、細かいことですが、v-ifの条件式もオプショナルチェーンを使って書き換えました。

<table class="c-table" v-if="comebackAccounts?.length">
    <thead>
        <tr>
            <th>アカウント名</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="comeback in comebackAccounts" :key="comeback.twitter_screen_name">
            <td>{{ comeback.twitter_screen_name }}</td>
            <td>
                <el-button @click.once="onPost(comeback.twitter_screen_name)" type="info" plain>自動機能を再開する</el-button>
            </td>
        </tr>
    </tbody>
</table>

最後に、onPostがきちんと引数を受け取るようにするのをお忘れなく。

……省略……
    methods: {
        onPost: function (twitter_screen_name) {
            axios.post("/comeback", {
                twitter_screen_name,
            })
……省略……

前述の通りLaravel側はわからないのでこれで完全に解決するかはわかりませんが、ご参考になれば幸いです。

Comments

[ttpk]

丁寧にご回答いただきありがとうございます

>一応、送信したいデータは「comebackAccountsに含まれる特定の（例えば対応するボタンを押した）要素のtwitter_screen_name」という想定ですが、もし違っていたらすみません。
はい。配列comebackAccounts内のtwitter_screen_nameになります

>恐らく色々試されているうちに諸々の要素の位置がズレていたのではないかと愚推します
はい。質問に関連のあるコードだけを移したためずれが生じてしまいました。

>同時に、v-ifもtableにつけ直しましたが、comebackAccountsの要素数が0の場合はテーブル自体も表示されなくなるので、デザインなどの問題があればv-ifを付けたdivでtableを囲うやり方に戻してください
comebackAccountsの要素数が0の場合は「該当するアカウントはありません」という文言を出しているので
V-ifをつけたdivでテーブルを囲もうと思います

>v-ifの条件式もオプショナルチェーンを使って書き換えました。
オブジェクトのプロパティが存在しない場合でも、エラーを起こさずにプロパティを参照できるんですね！
ありがとうございます

ブラウザの開発ツールのネットワークタブで/comebackへのPOST通信が
ステータス200になっていること
ペイロードでtwitter_screen_nameの値が入っていることを確認しました