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

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

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

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

JavaScript

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

Q&A

解決済

2回答

4329閲覧

vue.js で多次元配列を宣言する方法

Himamura

総合スコア39

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2019/08/03 08:28

Vue.js で例えば以下のコードを記述した場合

HTML

1<div v-for="n in 100" :key="n"> 2 <input type="text" v-model="inputForm[0].customer_name"> 3</div> 4<script> 5export default { 6 data() { 7 return { 8 inputForm: {} 9 } 10 } 11} 12</script>

TypeError: Cannot read property 'sale_section' of undefined
上記エラーが発生します。
inputForm[0]という配列内には「customer_name」という変数は無いということだと思います。

data内の宣言の方法を「[{}]」など、色んな方法に変えてみましたがダメでした。
多次元配列の宣言方法があれば教えて下さい。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/08/03 08:38

1次元配列ではないですか?
guest

回答2

0

<div v-for="inputForm in inputForms" :key="n"> <input type="text" v-model="inputForm.customer_name"> </div> <script> export default { data() { return { inputForms: [ { customer_name: 'Tom' }, { customer_name: 'Jack' }, { customer_name: 'Lisa' }, ], } } } </script>

投稿2019/08/03 10:55

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

nico25

2019/08/03 12:32

お騒がせして申し訳ございません。 ご指摘、ありがとうございます。
退会済みユーザー

退会済みユーザー

2019/08/03 12:34

元のコードでも動作はすると思うんですが、どうにも違和感が拭えなく・・・
nico25

2019/08/03 12:39

そう言っていただけると助かります... orz
退会済みユーザー

退会済みユーザー

2019/08/03 13:01

そして多次元配列ではないですね。
Himamura

2019/08/04 23:40

ご回答ありがとうございます。宣言の方法がわかりました!動作いたしましたのでご報告いたします
Himamura

2019/08/05 00:05

すみません、もう一つ教えて下さい。99コのcustomer_nameが必要な場合、 { customer_name: 'Tom' }, 上記記述が99コ必要ということでしょうか?
退会済みユーザー

退会済みユーザー

2019/08/05 00:12

customer_nameが定数であればそうです。 サーバサイドのDBから取得するなどでしたらそのような記述にはならないと思います。 どうも配列とオブジェクトを混同されており、JSの基本文法の理解が甘い感じがするので、まずは下記のチュートリアルを通されることをおすすめします。 https://ja.javascript.info/
Himamura

2019/08/05 00:45

早速のご回答ありがとうございます。 わかりました! javascriptについてはあまり理解しないまま開発がスタートしてしまったもので… 休憩時間にこのサイトで勉強します。
guest

0

ベストアンサー

その通りです。

inputForm[0]という配列内には「customer_name」という変数は無いということだと思います。

inputForm[0] には undefined がはいっています。このエラーは結構、頻出なので覚えるといいと思います。自分も泣かされました笑

TypeError: Cannot read property 'sale_section' of undefined TypeError: undefined の 'sale_section' プロパティは読み込めません。

以下に動くコードを書きました。


追記

上記リンク先の JSFiddle のコードは id:dyoshikawa 様の回答に読み替えてください。

text

1// 誤 2 inputForm: { 3 1: { 4 customer_name: 'Tom' 5 }, 6 2: { 7 customer_name: 'Jack' 8 }, 9 3: { 10 customer_name: 'Lisa' 11 }, 12 },

javascript

1// 正 2 inputForms: [ 3 { 4 customer_name: 'Tom' 5 }, 6 { 7 customer_name: 'Jack' 8 }, 9 { 10 customer_name: 'Lisa' 11 }, 12 ],

投稿2019/08/03 08:50

編集2019/08/03 12:37
nico25

総合スコア830

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

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

Himamura

2019/08/04 23:40

ご回答ありがとうございます。宣言の方法がわかりました!動作いたしましたのでご報告いたします
Himamura

2019/08/05 00:05

すみません、もう一つ教えて下さい。99コのcustomer_nameが必要な場合、 { customer_name: 'Tom' }, 上記記述が99コ必要ということでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問