Trying to achieve the following using Vue:
I have two JSON objects that provide information on languages and the number of inputs per language. Using nested loops, I display all the inputs. My goal is to create an object for each input with additional details (mentioned below).
The first array returns:
{
"type": "Faq",
"fields": [
"question",
"answer"
]
}
And the second array returns:
[
{
"type": "Language",
"id": 1,
"name": "Español",
"active": true,
},
{
"type": "Language",
"id": 2,
"name": "English",
"active": true,
},
{
"type": "Language",
"id": 3,
"name": "Francés",
"active": true,
}
]
A form needs to be created displaying questions and answers in each language, like:
Snippet example:
new Vue({
el: '#app',
data: {
msg: 'message',
translationSchemesFaqs: {
"type": "Faq",
"fields": [
"question",
"answer"
]
},
languageSelect: [{
"type": "Language",
"id": 1,
"name": "Español",
"active": true,
},
{
"type": "Language",
"id": 2,
"name": "English",
"active": true,
},
{
"type": "Language",
"id": 3,
"name": "Francés",
"active": true,
}
],
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<body>
<div id="app">
<div v-for="(language, i) in languageSelect" :key="i">
<h3>{{language.name}}</h3>
<div v-for="(translation, index) in translationSchemesFaqs.fields" :key="index">
<input
id="input2"
ref="groupId2"
tabindex="1"
class="body2"
outlined
required
:label="translation + ' ' + language.locale"
/>
</div>
</div>
</div>
</body>The entered information should be saved in an array of objects as shown:
[
{
"value": "",
"field": "question",
"language": {
"id": "1",
"name": "Español"
}
},
{
"value": "",
"field": "answer",
"language": {
"id": "1",
"name": "Español"
}
},
{
"value": "",
"field": "question",
"language": {
"id": "2",
"name": "English"
}
},
{
"value": "",
"field": "answer",
"language": {
"id": "2",
"name": "English"
}
},
{
"value": "",
"field": "question",
"language": {
"id": "3",
"name": "Francés"
}
},
{
"value": "",
"field": "answer",
"language": {
"id": "3",
"name": "Francés"
}
}]
Any suggestions on how this can be achieved?