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

Question

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

<div v-for="n in 100" :key="n">
  <input type="text" v-model="inputForm[0].customer_name">
</div>
<script>
export default {
  data() {
    return {
      inputForm: {}
    }
  }
}
</script>

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

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

Comments

[退会済みユーザー]

1次元配列ではないですか？

Answer 1

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

Comments

[nico25]

お騒がせして申し訳ございません。
ご指摘、ありがとうございます。

[退会済みユーザー]

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

[nico25]

そう言っていただけると助かります... orz

[退会済みユーザー]

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

[Himamura]

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

[Himamura]

すみません、もう一つ教えて下さい。９９コのcustomer_nameが必要な場合、

{
customer_name: 'Tom'
},

上記記述が９９コ必要ということでしょうか？

[退会済みユーザー]

customer_nameが定数であればそうです。

サーバサイドのDBから取得するなどでしたらそのような記述にはならないと思います。

どうも配列とオブジェクトを混同されており、JSの基本文法の理解が甘い感じがするので、まずは下記のチュートリアルを通されることをおすすめします。

https://ja.javascript.info/

[Himamura]

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

Answer 2

その通りです。

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

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

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

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

• サンプルコード

---

追記

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

// 誤
    inputForm: {
      1: {
      	customer_name: 'Tom'
      },
      2: {
      	customer_name: 'Jack'
      },
      3: {
      	customer_name: 'Lisa'
      },
    },

// 正
    inputForms: [
      {
      	customer_name: 'Tom'
      },
      {
      	customer_name: 'Jack'
      },
      {
      	customer_name: 'Lisa'
      },
    ],

Comments

[Himamura]

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

[Himamura]

すみません、もう一つ教えて下さい。９９コのcustomer_nameが必要な場合、

{
customer_name: 'Tom'
},

上記記述が９９コ必要ということでしょうか？