My goal is to dynamically create text-fields based on the elements in a multi-dimensional array called response that I receive from the back-end. Each element in the response array contains inner elements like response[0][0] and response[0][1], which are objects with properties such as caption, name, etc. (e.g., response[0][0].name).
I want to bind these text-fields to another two-dimensional array named data so that I can retrieve their values and use them however I need.
Here's the code snippet:
<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]"//Need to create data[i][j] element first, like data[i] = []
>
</v-text-field>
</v-layout>
</v-layout>
And here is the script section:
data () {
return {
data: [],
response: []
}
},
mounted: function () {
// Retrieve response from the back-end
}
I'm relatively new to Vue and JavaScript, so any assistance would be greatly appreciated... Feel free to ask for clarification if anything is unclear.