我正在尝试使用vue获得以下内容。
我有两个json返回语言和每种语言有多少个输入。我在for循环中创建了一个for循环这样我就可以显示所有的输入。我想要得到的是，为每个输入创建一个对象(下面我添加了格式类型)，并在每个输入中添加值和更多信息。
我有一个数组返回这个:
{
"type": "Faq",
"fields": [
"question",
"answer"
]
}
我有另一个数组返回这个
[
{
"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,
}
]
我试图创建一个形式，其中出现的问题和回答的每种语言，即:
下面是一个片段:
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>jsfiddle
并保存在对象数组
中[
{
"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"
}
}]
我该怎么做?
可能不是最好的方法，但您可以通过做一些映射来实现。首先，我将语言数组映射为具有model字段的数组，并且每个字段中都有value键，这将用作输入的v-model模型。然后我通过再次映射model来创建savedArrayOfObject计算值作为保存的对象数组:
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,
}
],
model: [],
},
computed: {
savedArrayOfObject() {
return this.model.flatMap(object => ([
...object.fields.map(field => ({
value: field.value,
field: field.field,
language: {
id: object.id,
name: object.name,
}
}))
]))
}
},
mounted() {
// do this after translationSchemesFaqs and languageSelect are available
this.model = this.languageSelect.map(language => ({
...language,
fields: this.translationSchemesFaqs.fields.map(translation => ({
field: translation,
value: null
}))
}))
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<body>
<div id="app">
{{JSON.stringify(savedArrayOfObject)}}
<div v-for="(language, i) in model" :key="i">
<h3>{{language.name}}</h3>
<div v-for="(translation, index) in language.fields" :key="index">
<input v-model="translation.value" id="input2" ref="groupId2" tabindex="1" class="body2" outlined required :label="translation + ' ' + language.locale" />
</div>
</div>
</div>
</body>