Vue：将动态输入数量存储在动态二维数组中

Question

我从后端得到一个名为response 的多维数组，我想做的是根据我响应的元素数量创建几个文本字段（每个响应元素都有一些内部元素像 response[0][0] 和 response[0][1] ，它们每个都是一个对象，每个文本字段都包含标题、名称等。例如response[0][0].name get name of response[0][0]元素）。 我想要的是将这些文本字段绑定到另一个名为data 的二维数组，这样我就可以获得它们的值并根据需要使用它们。 代码如下：

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