質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

解決済

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

ttpk
ttpk

総合スコア338

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

2回答

0グッド

0クリップ

215閲覧

投稿2022/10/08 16:43

前提

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

実現したいこと

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

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

該当のソースコード

bladeファイル

1@include('header') 2<main class="l-main"> 3 <div class="l-form"> 4 <div id="app"> 5 <panel-component :comeback-accounts='@json($comebackAccounts)'></panel-component> 6 </div> 7 </div> 8</main> 9 10@include('footer')

vue,jsファイル

1<template> 2 <div class="c-textbox__header u-text__title">凍結解除されたアカウント 3 <div v-if="comebackAccounts && comebackAccounts.length"> 4 <div v-for="comeback in comebackAccounts"> 5 <table class="c-table"> 6 <tr> 7 <th>アカウント名</th> 8 <td v-model="twitter_screen_name">{{ comeback.twitter_screen_name }}</td> 9 </tr> 10 </table> 11 </div> 12 <el-button v-on:click.once="onPost(comeback.twitter_screen_name)" type="info" plain>自動機能を再開する</el-button> 13 </div> 14 </div> 15</template> 16 17<script> 18export default { 19 props: { 20 comebackAccounts: Array, 21 }, 22 data() { 23 return {}; 24 }, 25 methods: { 26 onPost: function () { 27 axios.post("/comeback", { 28 twitter_screen_name: this.twitter_screen_name, 29 },).then((response) => { 30 // ちゃんと送信できたか確認用 31 console.log(response); 32 }) 33 .catch((err) => { 34 console.log(err); 35 }); 36 }, 37 }, 38} 39</script> 40

vue.jsから値を受け取るlaravel

1 2 public function comeback(Request $request){ 3 4 $twitter_screen_name = $request->input('$twitter_screen_name'); 5 Log::debug($twitter_screen_name); 6 DB::table('twitter_tokens') 7 ->where('twitter_screen_name', $twitter_screen_name) 8 ->update(['suspended_flg' => SuspendedFlg::getValue('正常')]); 9 return redirect('/home')->with('c_flash', '凍結解除しました!'); 10 }

試したこと

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

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

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

<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>

投稿2022/10/09 00:37

midok113

総合スコア6

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ttpk

2022/10/09 07:03

ご回答ありがとうございます ``` v-on:click="deleteComment('@{{comment.id}}' ``` で値を送れるんですね

0

ベストアンサー

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

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


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

イメージ:

js

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

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

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

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

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

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

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

js

1<table class="c-table" v-if="comebackAccounts?.length"> 2 <thead> 3 <tr> 4 <th>アカウント名</th> 5 <th></th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr v-for="comeback in comebackAccounts" :key="comeback.twitter_screen_name"> 10 <td>{{ comeback.twitter_screen_name }}</td> 11 <td> 12 <el-button @click.once="onPost(comeback.twitter_screen_name)" type="info" plain>自動機能を再開する</el-button> 13 </td> 14 </tr> 15 </tbody> 16</table>

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

js

1……省略…… 2 methods: { 3 onPost: function (twitter_screen_name) { 4 axios.post("/comeback", { 5 twitter_screen_name, 6 }) 7……省略……

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

投稿2022/10/08 23:57

fj68

総合スコア752

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ttpk

2022/10/09 07:01

丁寧にご回答いただきありがとうございます >一応、送信したいデータは「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の値が入っていることを確認しました

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。