Vue：ダイナミック2次元配列の動的入力数を格納する

Question

responseという名前の多次元配列をバックエンドから取得します。これは、要素Iの数に応じて複数のテキストフィールドを作成することですレスポンス[0] [0] [0] [1]のようないくつかの内部要素を持ちます。オブジェクトにはそれぞれのテキストフィールドのキャプション、名前などが入ります。例えば、response[0][0].name getレスポンスの名前[0] [0]要素）。 私が望むのは、これらのテキストフィールドをdataという名前の他の2次元配列にバインドすることです。その値を取得して、必要に応じて使用することができます。

<v-layout row wrap v-for="(row,i) in response" :key = "i"> 
     <v-layout v-for="(col,j) in row" :key = "j"> 
     <v-text-field 
      :name = "col.name" 
      :label = "col.caption" 
      v-model="data[i][j]"//I think somehow i should create data[i][j] element 
           first,like data[i] =[] 
      > 
     </v-text-field> 
     </v-layout> 
    </v-layout> 

そしてスクリプトです：

data() { 
return { 
    data: [], 
    response: [] 
} 
}, 
mounted: function() { 
    //get response from back-end 
} 

私はVUEとJavaScriptに新たなんだ、任意のヘルプは、それははっきりしていない場合は はコメントしてください...感謝されるだろう は、ここでは、コードです。

Answer 1

...問題の内容を明確にすることはできますか？レスポンス配列を生成することですか？

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    data: [ 
 
     [{ 
 
      name: 'name00', 
 
      caption: 'caption00' 
 
     }, 
 
     { 
 
      name: 'name01', 
 
      caption: 'caption01' 
 
     } 
 
     ], 
 
     [{ 
 
      name: 'name10', 
 
      caption: 'caption10' 
 
     }, 
 
     { 
 
      name: 'name11', 
 
      caption: 'caption11' 
 
     } 
 
     ] 
 
    ], 
 
    response: [ 
 
     ['',''], 
 
     ['',''] 
 
    ] 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.5/vue.min.js"></script> 
 
<div id="app"> 
 
    <div v-for="(i, ii) in data" :key="ii"> 
 
    <div v-for="(j, jj) in i" :key="jj"> 
 
     {{j.name}} 
 
     
 
     <input v-model="response[ii][jj]" /> 
 
    </div> 
 
    </div> 
 
    <pre>{{response}}</pre> 
 
</div>