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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3541閲覧

Vue.jsで、JavaScriptのforEach内thisではなく、Vueのthisに格納したい

trigger

総合スコア8

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/06/14 04:22

前提・実現したいこと

開発環境
laravel 8.x
vue.js 2.x

以下のような配列(arrayData)を取得します。

[ { "user_id": 1, "number": 1, "other_data": ... }, { "user_id": 1, "number": 2, "other_data": ... }, { "user_id": 1, "number": 3, "other_data": ... } ]

この配列内のオブジェクトを、Vue.jsのforEachでnumber毎に一つずつ別の変数に格納したいです。
numberは開発側が定めている数で、定めた数以上は出てこず、オブジェクト同士で必ず重複のないようにできています。
ただし、配列内に全てのnumberが確実にあるわけではなく、飛ばし飛ばしの可能性があります。

試したこと

data() { return { object1, object2, object3 } }, props: { arrayData: Array }, mounted() { let ojt1; let ojt2; let ojt3; this.arrayData.forEach(element => { switch (element.number) { case 1: ojt1 = element; break; case 2: ojt2 = element; break; case 3: ojt3 = element; break; default: break; } } this.object1 = ojt1; this.object2 = ojt2; this.object3 = ojt3; }

このように、forEachの外で新たに変数を作り、代入。それをもう一度thisを使って代入しています。
求めていたことは出来ましたが、なんとなく冗長的というか、forEach内で直接代入して解決できないかなと考えています。

初歩的な質問かもしれませんが、ご回答頂けると幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これだと上手くいかないですかね??

javascript

1 2 this.arrayData.forEach(element => { 3 switch (element.number) { 4 case 1: 5 this.object1 = element; 6 break; 7 case 2: 8 this.object2 = element; 9 break; 10 case 3: 11 this.object3 = element; 12 break; 13 default: 14 break; 15 } 16 } 17

投稿2021/06/14 10:54

runnynose

総合スコア497

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

trigger

2021/06/14 13:03

ご回答有難うございます。 forEach内で使うthisは、繰り返す配列を指すことになるので、vue.jsで使う場合のthisとは別物になるため、これでは上手くいかないみたいです。
runnynose

2021/06/14 13:13

あら?アロー関数を使用されれているみたいなので、thisのスコープが変わっているのだと思いました。 参考:https://qiita.com/immrshc/items/aec874fc5cf55cde7fa1 ちなみに、アロー関数じゃないときは、よく以下のように書いていました。 ``` var _this = this; this.arrayData.forEach(function(element) { switch (element.number) { case 1: _this.object1 = element; break; case 2: _this.object2 = element; break; case 3: _this.object3 = element; break; default: break; } } ```
trigger

2021/06/15 07:22

ありがとうございます。 申し訳ないです、ご指摘を頂いた通りで動きました。 何か勘違いをしていたのか、キャッシュを残したまま実行して反映されていなかったのかわかりませんが、再度組み直したら上手く動きました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問