はじめに 一週間前から初めて触るVue + Laravelの環境で新規案件を開発しはじめました。 入力フォームの情報を確認画面に渡し、入力ミスなどで入力フォームに戻る際に、Laravelでフォームの情報を受け渡ししようかと奮闘しましたができず、結局Javascriptの力技で解決しました。。。多分 本来のやり方ではないと思いますが、良かったら参考にしてください。 環境 バックエンド:PHP - Laravel8 フロントエンド:Vue.js DB:Mysql ver8.0 Docker使用 最初にやろうとしたこと 新規入力フォーム userCreate.vue <template> <form @submit.prevent="submit"> <label for="name">名前</label> <input type="text" id="name" name="name" v-model="form.name" /> <label for="email">メールアドレス</label> <input type="text" id="email" name="email" v-model="form.email" /> <button name="test" type="submit">送信</button> </form> </template> <script> //中略 export default { 　　　　　props: { user: Object, }, data() { return { 　　　　　　　　　　　　　// 戻った時に予め入力していた値を受け取り、フォームに復元する form: this.$inertia.form({ name: this.user.name, email: this.user.email, }), }; }, methods: { submit() { this.form.post(this.route("userconfirm")); }, }, }; </script> 入力確認フォーム userConfirm.vue <template> <form @submit.prevent="submit"> <table> <tbody> <tr> <td>名前</td> <td>{{ user.name }}</td> </tr> <tr> <td>email</td> <td>{{ user.email }}</td> </tr> </tbody> </table> <button name="back" type="submit">戻る</button> <button name="send" type="submit">送信</button> </form> </template> <script> //中略 export default { 　　　　　props: { user: Object, }, data() { return { form: this.$inertia.form({ name: this.user.name, email: this.user.email, }), }; }, methods: { submit() { // data()内のformデータをコントローラに送る this.form.post(this.route("usercomplate")); }, }, }; </script> laravel側コントローラー userController.php <?php namespace App\Http\Controllers; use Inertia\Inertia; use Illuminate\Http\Request; use App\Models\User; class UserController extends Controller { public function create() { return Inertia::render('Mypage/UserCreate'); } public function confirm(Request $request) { $user = $request->all(); return Inertia::render('Mypage/UserConfirm', ['user' => $user]); } public function complete(Request $request) { if($request->has('send')){ // ここに保存の処理 }elseif($request->has('back')){ // ここに新規入力フォームに戻る処理 $user = $request->all(); return Inertia::render('Mypage/UserConfirm', ['user' => $user]); } } } ボタンのnameを受け取りif文で条件分岐処理を行うのがLaravelのベストプラクティスかと思われますが、どうやってもname属性を受け渡しできずにLaravelでの処理は諦めました。。。。。 URLから受け取る処理をVueで実装する 新規入力フォーム userCreate.vue <template> <form @submit.prevent="submit"> <label for="name">名前</label> <input type="text" id="name" name="name" v-model="form.name" /> <label for="email">メールアドレス</label> <input type="text" id="email" name="email" v-model="form.email" /> <button type="submit">送信</button> </form> </template> <script> //中略 export default { 　　　　　props: { user: Object, }, data() { 　　　　　　　　// ①ここを追加 　　　　　　　　let url = new URL(window.location.href); let params = url.searchParams; return { 　　　　　　　　　　　　　// ②パラメータを受け取り、フォームに復元する form: this.$inertia.form({ name: params.get("name"), email: params.get("email"), }), }; }, methods: { submit() { this.form.post(this.route("userconfirm")); }, }, }; </script> 入力確認フォーム userConfirm.vue <template> <form @submit.prevent="submit"> <table> <tbody> <tr> <td>名前</td> <td>{{ user.name }}</td> </tr> <tr> <td>email</td> <td>{{ user.email }}</td> </tr> </tbody> </table> <div @click="backpage">戻る</div> <button type="submit">送信</button> </form> </template> <script> //中略 export default { 　　　　　props: { user: Object, }, data() { return { form: this.$inertia.form({ last_name: this.user.name, email: this.user.email, }), }; }, methods: { submit() { this.form.post(this.route("usercomplete")); }, 　　　　　　　　// 入力値が含まれるパラメーターを送る backpage() { this.form.get(this.route("usercreate")); }, }; </script> [戻る]をクリックしbackpageメソッド実行されると、下記のような入力データが入ったパラメータが送られるため①でURLを取得し、②で各項目をGetしてからdataに初期値を渡す。 http://localhost:8080//user/create?name=foobar&email=test@test.com 参考サイト URLに含まれるGETパラメータを取得する Laravelにて１つのFormで複数ボタンを実装する際の備忘録 正しい方法ではないかもしれませんがご参考まで

投稿一覧ページから投稿詳細ページをモーダルウィンドウとして表示 こんな感じの表示をする。 https://www.kabanoki.net/3144/ この記事を最初は参考にしてますが、動的な子コンポーネントを投稿一覧からモーダルウィンドウを表示させる技術は僕のオリジナルなので、動くは動きますが、なにか間違えてる可能性あります。 drinkをpostに置き換えて読めば読みやすいです。 投稿一覧ページRails と Vue.jsでSPAな感じにするやりかたはこちらの教材が結構参考になります。 てか今度僕が記事にできればなと思います。 https://www.techpit.jp/courses/123/curriculums/126/sections/935/parts/3581 下準備 npm install vue-js-modal --save vue-js-modalは簡単にモーダルウィンドウを簡単に実装できる Vue.jsのライブラリ的なもの。 hello_vue.js import Vue from 'vue' import App from '../app.vue' +import VModal from 'vue-js-modal' +Vue.use(VModal) このように記述すれば下準備ok app/javascript/app.vue <template> <li v-for="drink in drinks" :key="drink.id" class="list" > <span>{{ drink.price }}円<br>(税込み)</span> <button v-on:click="show(drink)">詳細を表示</button> <modal v-bind:name="'display-drink-'+drink.id" height="1000px" styles="background-color: bisque"> <drinkShow :drink=drink></drinkShow> </modal> </li> </div> </template> <script> import axios from 'axios'; import likeButton from './packs/components/like/likeButton.vue'; import drinkShow from './packs/components/drinks/show.vue'; export default { components: { likeButton, drinkShow }, data: function(){ return { drinks: "drinks" } }, mounted(){ this.setDrink(); }, methods: { setDrink: function(){ axios.get('/api/drinks') .then(response =>( this.drinks = response.data )) }, show : function(drink) { this.$modal.show(`display-drink-${drink.id}`); }, hide : function () { this.$modal.hide('display-drink-show'); } } } </script> 以上が全体像 <button v-on:click="show(drink)">詳細を表示</button> まずこんな感じに書いて、 show : function(drink) { this.$modal.show(`display-drink-${drink.id}`); }, show関数にdrinkという引数を渡してあげる。 this.$modal.show(display-drink-${drink.id}); のthis.$modal.show引数に指定したものと、modal name=”” のnameに指定したものが一致したらそのモーダルウィンドウを開く仕様らしい。 <modal v-bind:name="'display-drink-'+drink.id" 　　height="1000px" styles="background-color: bisque"> <drinkShow :drink=drink></drinkShow> </modal> 一意性を持たせるために、drinkのidによってモーダルウィンドウを開くようにする。 やってもらったら分かると思いますが、this.$modal.show("hoge"); とやったら、配列の中にmodalを置いているので、配列分ループされて、配列分モーダルウィンドウが表示されてしまう。 なので、drink.idでnameを指定することにより、一意性を持たせて、ボタンを押したら その押した投稿した表示されないようにする。 このやり方は俺が自分で考えた。まじで天才すぎる。 <modal v-bind:name="'display-drink-'+drink.id" 　　height="1000px" styles="background-color: bisque"> <drinkShow :drink=drink></drinkShow> </modal> こんな感じでスタイルを指定したり、 modalの中に子コンポーネントを配置してる。 んで、子コンポーネントのタグにこんな感じで書くことで 子コンポーネントにデータを渡してる。 javascript/packs/conponents/drinks/show.vue <template> <div class='show-main'> <div class='item-img-content'> <button v-on:click="hide(drink)">戻る</button> <img class= "item-img" v-bind:src="drink.image" > </div> <div class='item-info'> <h3 class='item-name'> {{drink.name}} </h3> <div class='item-price'> <span>{{drink.price}}円<br>(税込み)</span> </div> <div class='item-explain'> {{drink.explain}} </div> </ul> </div> </template> <script> export default { props: ['drink'], components: { // likeButton }, methods: { hide : function (drink) { this.$modal.hide(`display-drink-${drink.id}`); } } } </script> props: ['drink'], と書くことで親コンポーネントから送られたデータを受け取れる。 まぁあとは見たとおり。 投稿一覧からモーダルウィンドウを表示するのは割と工夫が必要でしたが、 これでできました。

皆さんこんにちはー 僕は現在LaravelとVueでシステム開発を行っています。 あまり記述の仕方がわかっていなかったので備忘録も兼ねて記事にしていきます。 Laravel8とVue3自体比較的新しいため新機能の情報自体少ないです。 そのため、今回紹介する記述の方法がQiitaには掲載がなかったので投稿しようと思いました。 間違っている箇所があったら指摘していただけると幸いです。 では参りましょう！！ 初期設定 PHPのバージョン $ php -v PHP 8.0.9 (cli) (built: Jul 29 2021 17:21:21) ( NTS ) Copyright (c) The PHP Group Zend Engine v4.0.9, Copyright (c) Zend Technologies with Zend OPcache v8.0.9, Copyright (c), by Zend Technologies Laravelのバージョン $ php artisan --version Laravel Framework 8.56.0 vueのバージョン "vue": "^3.0.5", //package.json こんな感じです。 ではこの状態からreaddubleを見ながらLaravelスタートさせましょう！ 今回は、LaravelパッケージのBreezeを利用します。 【インストール】 公式サイトを見ながらインストールしてきます。 composerが入っていない場合、事前にインストールをしておいて下さい。 composer create-project laravel/laravel example-app cd example-app php artisan serve ローカル環境で接続確認します。 http://127.0.0.1:8000/ Breezeのインストール 【breezeとは】 Laravelパッケージのjetstreamより軽量かつ、簡単にログイン機能が導入できるLaravelパッケージです。 Laravel/uiの代わりとしてLaravel８から導入されているようです。 全部で３種類あり、viewの実装方法で別れています。 １．bladeを利用して表示させる ２．Vue.jsを利用して表示させる ３．React.jsを利用して表示させる の３つです。 それぞれLinuxコマンドが違うので紹介していきます。 ちなみに今回はタイトル通り２番のVue.jsをつかうやーつです。 ２番（vue.js）と３番（react.js）のどちらかをインストールすることによって、同時にInertia.jsもインストールされます。 それではコマンドぽちぽちします。 blade_ver composer require laravel/breeze --dev php artisan breeze:install //ここだけ違う npm install npm run dev php artisan migrate vue_ver composer require laravel/breeze --dev php artisan breeze:install vue //ここだけ違う npm install npm run dev php artisan migrate react_ver composer require laravel/breeze --dev php artisan breeze:install react //ここだけ違う npm install npm run dev php artisan migrate お尻に追加するだけですね。 reddubleにも同様のことが書かれています。 再度ローカル環境で確認すると、右上にlog inとRegisterという項目が追加されています。 これでログイン機能の完成です。 次はファイル構造とルーティングを確認してみましょう。 どこからファイルを呼び出しているのか？ ルーティングを確認してみましょう！ routes/web.php Route::get('/', function () { return Inertia::render('Welcome', [ 'canLogin' => Route::has('login'), 'canRegister' => Route::has('register'), 'laravelVersion' => Application::VERSION, 'phpVersion' => PHP_VERSION, ]); }); Route::get('/dashboard', function () { return Inertia::render('Dashboard'); })->middleware(['auth', 'verified'])->name('dashboard'); require __DIR__.'/auth.php'; 全体的にBreezeによって手が加えられています。 routes/web.php Route::get('/', function () { return Inertia::render('Welcome' 　//←ここが作用しています このInertia::renderがvueファイルへ直接呼び出しています。 Laravelだと、初期設定のルーティングでresources/views/**.blade.phpを参照しますが、 Inertia::renderと記述するとresources/js/Pages/**.vueを参照するようになります。 bladeファイルは全スルーされます。 Inertiaのルーティングを説明してきます。 例 Inertia::render（ // '第一引数'、[ // 第二引数 //] ）； // 第一引数：　resources/js/Pages/の呼び出したいファイル名 // 第二引数:　渡したいデータを記述 というわかりやすい使い方です。 Vue.jsにはどのようにデータを渡すのか ではVue.jsではどのようにデータが渡るのでしょうか。 その点見てみましょう。 routes/web.php // ここを例に見ていきます Route::get('/', function () { return Inertia::render('Welcome', [ 'canLogin' => Route::has('login'), 'canRegister' => Route::has('register'), 'laravelVersion' => Application::VERSION, 'phpVersion' => PHP_VERSION, ]); }); return Inertia::render('Welcome'と記載があるので、 Welcome.vueを見てみます。 resources/js/Pages/Welcome.vue <!-- 重要なところがscriptタグ内なので、templateタグとstyleタグは省略しています。 --> <script> import { Head, Link } from '@inertiajs/inertia-vue3'; export default { components: { Head, Link, }, props: { canLogin: Boolean, canRegister: Boolean, laravelVersion: String, phpVersion: String, }, } </script> ルーティング側から渡っているデータは routes/web.php 'canLogin''canRegister''laravelVersion''phpVersion' です。 Vue側ではpropsで受け取っているだけです。 なんて簡単な・・・。 resources/js/Pages/Welcome.vue <!-- 重要なところがscriptタグ内なので、templateタグとstyleタグは省略しています。 --> <script> import { Head, Link } from '@inertiajs/inertia-vue3'; export default { components: { Head, Link, }, props: { canLogin: Boolean,　　　←ここ canRegister: Boolean,　　　←ここ laravelVersion: String,　　　←ここ phpVersion: String,　　　←ここ }, } </script> propsを書くだけで、Laravelからデータ受け取れます。 これでblade.phpとはおさらば？ですかね。 終わりに 以上が、Laravel8でフロント部分をbladeを使わずにVue3だけで書く方法（Inertia.js使用）です。 これからの開発の参考になれば幸いです。 ありがとうございました！！！

elment ui の el-rate を使って ・ユーザーのID ・スコア を取得して axios したい。 しかし、1度クリックしたら何度も動いてしまう。 結論 @change.once を使おう！ <template> <div> <div v-for="(v,key) in list"> イケメン度 {{list[key].ikemen}} <el-rate v-model="list[key].ikemen" @change.once="ikemenRate(key)"></el-rate> </div> </div> </template> <script> export default { data () { return { list:[] }; }, methods: { ikemenRate(key){ let dataform = new FormData(); dataform.append('id',this.list[key].id); dataform.append('ikemen',this.list[key].ikemen); axios.post('/user/ikemenRate', dataform).then(e => { console.log(e.data.res); console.log(" イケメンレート 成功"); }).catch((error) => { console.log(" イケメンレート エラー"); }); }, }, } </script>

https://qiita.com/divclass123/items/61f592eb3663828eb931 前回の続き。 前回はかなり苦戦したが、なんとか実装できた。 しかし、子コンポーネントをモーダルウィンドウで表示して、そこでいいねを押してもリアルタイムで親コンポーネントにいいねが表示されないといった問題があった。 ちなみにリロードするとしっかりとどちらにも反映される。 (親)app.vueのなかに(app.vueから見たら子)show.vueもあって、(子)likeButton.vueもある。 (親,app.vueから見たら子)show.vueのなかに(子)likeButton.vueもある。 まぁ、なんかすこしややこしい。。。 app.vueのlikebutton.vueはしっかり機能してるし、 show.vueのなかのlikeButton.vueも機能してる。 問題はapp.vueからshow.vueをモーダルウィンドウで表示したときに、いいねがリアルタイムで反映されない。 [追記]色々あがいたが、きつかった。。。いつかリベンジ app.vue <drinkShow :drink=drink></drinkShow> <likeButton :drinkId=drink.id></likeButton> show.vue <likeButton :drinkId=drink.id></likeButton> likeButton.vue <template> <div> <div v-if="isLiked" @click="deleteLike()"> <div class="iine__button"> <i class="fas fa-heart"></i> {{ count }} </div> </div> <div v-else @click="registerLike()"> <div class="iine__button"> <i class="far fa-heart"></i> {{ count }} </div> </div> </div> </template> <script> import axios from 'axios' // import { csrfToken } from 'rails-ujs' // // CSRFトークンの取得とリクエストヘッダへの設定をしてくれます // axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken() export default { props: ["drinkId"], // user.idはdrinks/index.html.erbに定義 data(){ return{ likeList: [] // いいね一覧を格納するための変数 } }, computed: { // データが変更されるたび動く // ここではlikeListが変更される度に、count,isLikedが再構築される count(){ return this.likeList.length // いいね数を返す }, isLiked(){ // ログインユーザーが既にいいねしてるかを判定する if (this.likeList.length === 0){ return false} return Boolean(this.findLikeId()) } }, created: function(){ // vueインスタンスの作成、初期化直後に実行される this.fetchLikeByDrinkId().then(result =>{ console.log(result) this.likeList = result }) }, methods: { fetchLikeByDrinkId: async function(){ // async function() // jsの非同期処理 const response = await axios.get('/api/likes',{params: {drink_id:this.drinkId,user_id: user.id}}) // await // その投稿のいいね一覧を取得したい // もし処理が失敗したらプロセスから抜ける(処理をやめる？) return response.data }, registerLike: async function(){ // rails側のcreateアクションにリクエストするメソッド const response = await axios.post('/api/likes',{drink_id: this.drinkId,user_id: user.id}) this.fetchLikeByDrinkId().then(result => { this.likeList = result }) }, deleteLike: async function(){ // rails側のdestroyアクションにリクエストするメソッド const likeId = this.findLikeId() const response = await axios.delete(`/api/likes/${likeId}`,{params: {drink_id: this.drinkId,user_id: user.id}}) this.likeList = this.likeList.filter(n => n.id !== likeId) }, // ログインユーザーがいいねしているLikeモデルのidを返す findLikeId: function(){ const like = this.likeList.find((like) => { return (like.user_id == user.id) }) if (like) { return like.id } } } } </script> https://qiita.com/TK-C/items/0a3acb9d0d310f8fd380 この記事みたけど、俺がやりたいこととは違っているような気がしていて、 発火させるイベントはどちらも、likeButton.vueのイベントだから。。。 親コンポーネントのイベントを発火させるわけではない。 親コンポーネントの中にある、子コンポーネントのイベントを発火するわけだから。 どうすればいいのか。。。 一旦。従来の子コンポーネントから親のイベントを発火させるといったやりかたでやってみよう。 app.vueはlikeButton.vueをインポートしてるから、likeButtonのイベントも発火してくれる だろうと仮設を立てる。 いや、てかそもそもlikeButtonに書いてあることをapp.vueに書いてしまえばいいような気がする。 そしたら、show.vueから親コンポーネントのいいねに関するメソッドを呼び出せるし、、 app.vue <div> <div v-if="isLiked" @click="deleteLike()"> <div class="iine__button"> <i class="fas fa-heart"></i> {{ count }} </div> </div> <div v-else @click="registerLike()"> <div class="iine__button"> <i class="far fa-heart"></i> {{ count }} </div> </div> </div> <script> import axios from 'axios'; import likeButton from './packs/components/like/likeButton.vue'; import drinkShow from './packs/components/drinks/show.vue'; export default { components: { likeButton, drinkShow }, data: function(){ return { drinks: "drinks", likeList: [] } }, computed: { // データが変更されるたび動く // ここではlikeListが変更される度に、count,isLikedが再構築される count(){ return this.likeList.length // いいね数を返す }, isLiked(){ // ログインユーザーが既にいいねしてるかを判定する if (this.likeList.length === 0){ return false} return Boolean(this.findLikeId()) } }, created: function(){ // vueインスタンスの作成、初期化直後に実行される this.fetchLikeByDrinkId().then(result =>{ console.log(result) this.likeList = result }) }, mounted(){ this.setDrink(); }, methods: { setDrink: function(){ axios.get('/api/drinks') .then(response =>( this.drinks = response.data )) }, show : function(drink) { this.$modal.show(`display-drink-${drink.id}`); }, hide : function () { this.$modal.hide('display-drink-show'); }, fetchLikeByDrinkId: async function(){ // async function() // jsの非同期処理 const response = await axios.get('/api/likes',{params: {drink_id:this.drinkId,user_id: user.id}}) // await // その投稿のいいね一覧を取得したい // もし処理が失敗したらプロセスから抜ける(処理をやめる？) return response.data }, registerLike: async function(){ // rails側のcreateアクションにリクエストするメソッド const response = await axios.post('/api/likes',{drink_id: this.drinkId,user_id: user.id}) this.fetchLikeByDrinkId().then(result => { this.likeList = result }) }, deleteLike: async function(){ // rails側のdestroyアクションにリクエストするメソッド const likeId = this.findLikeId() const response = await axios.delete(`/api/likes/${likeId}`,{params: {drink_id: this.drinkId,user_id: user.id}}) this.likeList = this.likeList.filter(n => n.id !== likeId) }, // ログインユーザーがいいねしているLikeモデルのidを返す findLikeId: function(){ const like = this.likeList.find((like) => { return (like.user_id == user.id) }) if (like) { return like.id } } } } </script> likeButton.vueの内容をコピペ。 こうするときれいな親子関係ができた。 parent.vue <likeButton :drinkId=drink.id></likeButton> likeButton(child).vue registerLike: async function(){ // rails側のcreateアクションにリクエストするメソッド const response = await axios.post('/api/likes',{drink_id: this.drinkId,user_id: user.id}) this.fetchLikeByDrinkId().then(result => { this.likeList = result }) }, というふうに、定義していましたが、 app.vue <li v-for="drink in drinks" :key="drink.id" class="list" > <div v-else @click="registerLike(drink)"> <script> registerLike: async function(drink){ // rails側のcreateアクションにリクエストするメソッド const response = await axios.post('/api/likes',{drink_id: drink.id,user_id: user.id}) this.fetchLikeByDrinkId().then(result => { this.likeList = result }) }, </script> こんな感じで改めて定義し直す感じで。 って思ったら、 app.vue fetchLikeByDrinkId: async function(){ // async function() // jsの非同期処理 const response = await axios.get('/api/likes',{params: {drink_id: drink.id,user_id: user.id}}) // await // その投稿のいいね一覧を取得したい // もし処理が失敗したらプロセスから抜ける(処理をやめる？) return response.data }, のどの投稿にどれだけいいねがついてるかを見るメソッドで drink単体のidを取得しなければならない。。。 なんか、いいねが２つ一気につくようになってる。 app.vue <div v-else @click="registerLike(drink)"> app.vue registerLike: async function(drink){ // rails側のcreateアクションにリクエストするメソッド console.log(drink) const response = await axios.post('/api/likes',{drink_id: drink.id,user_id: user.id}) this.fetchLikeByDrinkId(drink).then(result => { this.likeList = result }) }, app.vue fetchLikeByDrinkId: async function(drink){ // async function() // jsの非同期処理 console.log(drink) const response = await axios.get('/api/likes',{params: {drink_id: drink.id,user_id: user.id}}) // await // その投稿のいいね一覧を取得したい // もし処理が失敗したらプロセスから抜ける(処理をやめる？) return response.data }, なんか、いいねが２つ一気につくようになってる。 ってなったのは // created: function(){ // // vueインスタンスの作成、初期化直後に実行される // this.fetchLikeByDrinkId().then(result =>{ // console.log(result) // this.likeList = result // }) // }, ここをコメントアウトしたから。 ほんとはいいねされてるけど、最初にいいねが表示されてないから、 ２ついいねされてる感じになってる。。。。 created: function(){ // vueインスタンスの作成、初期化直後に実行される this.drinks.forEach(drink=> this.fetchLikeByDrinkId(drink).then(result =>{ console.log(result) this.likeList = result }) ) }, こんなかんじに記述。 mounted(){ this.setDrink(); }, methods: { setDrink: function(){ axios.get('/api/drinks') .then(response =>( this.drinks = response.data )) }, でdrinksの配列を一つ一つとりだして、実行してる。 ただ、mountedよりcreatedのほうが早く実行されるから意味ない。 created: function(){ // vueインスタンスの作成、初期化直後に実行される this.setDrink(); }, mounted(){ this.drinks.forEach(drink=> this.fetchLikeByDrinkId(drink).then(result =>{ console.log(result) this.likeList = result }) ) }, こんな感じに書き換えた、したらfetchLikeByDrinkIdが最初の方にしっかりと動いてくれて 最初にいいねが表示されるんじゃないかと予想。 結論なんか動かない。。。 this.drinks.forEach isnot function　とかになる。。。 なんで。。。 registerLike: async function(drink){で console.log(this.drinksとかやるとアクセスできる。) てかさいあく、show.vueにいいねボタンを表示せずに諦めればいい話ではある。 app.vue <script> mounted(){ this.setDrink(); }, methods: { setDrink: function(){ axios.get('/api/memos') .then(response =>( response.data.forEach(drink=> this.fetchLikeByDrinkId(drink)) )) }, fetchLikeByDrinkId: async function(drink){ // async function() // jsの非同期処理 const response = await axios.get('/api/likes',{params: {drink_id: drink.id,user_id: user.id}}) // await // その投稿のいいね一覧を取得したい // もし処理が失敗したらプロセスから抜ける(処理をやめる？) console.log(response.data) return response.data }, </script> 受け取った、drinksの配列。つまり投稿の配列を一つ一つにたいして、forEachをして、 fetchLikeByDrinkId をして、上手くいくと思ったがなんか上手くいかない。。。 axios.get('/api/drinks')にするべきでした。。。 methods: { setDrink: function(){ axios.get('/api/drinks') .then(response =>( response.data.forEach(drink=> this.fetchLikeByDrinkId(drink)) )) }, 改めてコンナ感じで定義 結局無理だったので、一旦諦めることに、、、、。 show.vueにはいいねボタンを表示しないことにしーとこ。。。。

この記事について Vue.js開発中のエラーについて備忘。 開発環境 Mac OS Node.js v12.13.1 npm 6.12.1 Vue CLI 3.9.0 vue 2.6.2 Mac OS エラー [Vue warn]: Avoid using non-primitive value as key, use string/number value instead. 原因 v-forのkeyに配列やオブジェクトを指定しているために発生するエラー NG <div v-for="item in items" :key="item"> {{item}} </div> OK <div v-for="(item, index) in items" :key="index"> {{item}} </div> 参考サイト： vuejs 開発時に遭遇したエラーリスト

トラブル ある日突然、import firebase from "firebase/app"; とかすると、"export 'firestore' (imported as 'firebase') was not found in 'firebase/app' とか言われて、何をどうしても直らなくなりました。 いきなり結論 試した環境は以下の通り (Ubuntu 20.04LTS)。 ＄vue --version 4.5.13 $ firebase --version 9.16.5 $ npm -v 7.21.0 $ yarn -v 1.22.11 $ node -v v14.17.4 これで、 $ vue create myproject とすると、firebase 9.0.0 が使われるようです。それを 8.10.0 に治したらエラーが出なくなりました。下記のような感じです。 package.json "dependencies": { "core-js": "^3.6.5", "firebase": "^8.10.0", "firebaseui": "^5.0.0", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuetify": "^2.4.0" } 後は普通に、 import firebase from 'firebase/app'; import "firebase/auth"; とかで、エラーはでなくなりました。 これ、まじで分らんかったんだけど、こんなこと起こるのうちだけ？ 参考 VueでFirebaseを使うと "export 'firestore' (imported as 'firebase') was not found in 'firebase/app' 解決法

トラブル ある日突然、import firebase from "firebase/app"; とかすると、"export 'firestore' (imported as 'firebase') was not found in 'firebase/app' とか言われて、何をどうしても直らなくなりました。 いきなり結論 試した環境は以下の通り (Ubuntu 20.04LTS)。 ＄vue --version 4.5.13 $ firebase --version 9.16.5 $ npm -v 7.21.0 $ yarn -v 1.22.11 $ node -v v14.17.4 これで、 $ vue create myproject とすると、firebase 9.0.0 が使われるようです。それを 8.10.0 に治したらエラーが出なくなりました。下記のような感じです。 package.json "dependencies": { "core-js": "^3.6.5", "firebase": "^8.10.0", "firebaseui": "^5.0.0", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuetify": "^2.4.0" } 後は普通に、 import firebase from 'firebase/app'; import "firebase/auth"; とかで、エラーはでなくなりました。 これ、まじで分らんかったんだけど、こんなこと起こるのうちだけ？ 参考 VueでFirebaseを使うと "export 'firestore' (imported as 'firebase') was not found in 'firebase/app' 解決法