Save a new array of objects in a form with a for loop Vue.js-CodePudding

I am trying with vue to get the following.

I have two json that return me the languages and how many inputs per language there are. I made a for loop inside a for loop so I can show all the inputs. What I want to get is that for each input an object is created, (below I add the type of format), with the value that is added in each input and more information.

I have an array that returns this:

 {
    "type": "Faq",
    "fields": [
        "question",
        "answer"
    ]
}

And I have another array that returns this:

[
    {
        "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,
    }
]

I'm trying to create a form, in which appear question and answer of each language, ie :

Here's a snippet:

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"
               
               outlined
               required
               :label="translation   ' '   language.locale"
             />
            </div>
          </div>
          </div>
</body>

jsfiddle

and that it is saved in an array of objects

[
{
    "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"
    }
}]

How can I do it?

CodePudding user response：

Probably not the best way to do this, but you could do it by doing a little mappings. First I map the languages array to have fields as model, and have value key inside each, and this will be used as the model for v-model of the inputs. Then I create the savedArrayOfObject computed value as the saved array of objects by mapping the model again:

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"  outlined required :label="translation   ' '   language.locale" />
      </div>
    </div>
  </div>
</body>