Как на Vue создать форму с динамически генерируемым количеством полей?

Question

[ak_wi]

Есть массив животных, в котором у каждого животного есть некоторое количество разных параметров:

animals: [
                    {
                        name: "spider",
                        params: [
                            "size",
                            "legsCount",
                            "weight"
                        ]
                    },
                    {
                        name: "dog",
                        params: [
                            "weight",
                            "breed",
                            "height",
                            "color"
                        ]
                    }
                ]

Как на Vue сделать форму, которая бы позволила сохранять для каждого животного значения к этим параметрам?

Например, для паука результат мог бы быть таким:

{
                        name: "spider",
                        params: {
                            "size": '1cm',
                            "legsCount": 8,
                            "weight": 8
                        }
                    },

Answer 1

[Дмитрий Беляев]

<script>
export default {
  data() {
    return {
      animals: [{
        name: "spider",
        params: {
          size: '',
          legsCount: '',
          weight: ''
        }
      }, {
        name: "dog",
        params: {
          weight: '',
          breed: '',
          height: '',
          color: ''
        }
      }]
    };
  }
};
</script>

<template>
  <form>
    <fieldset v-for="animal of animals" :key="animal.name">
      <legend>{{animal.name}}</legend>
      <label v-for="(_, param) in animal.params" :key="`${animal.name}::${param}`">
        <span>{{param}}:</span>
        <input v-model="animal.params[param]">
      </label>
    </fieldset>
  </form>
</template>

Comments

[ak_wi]

Спасибо за ответ!

В предлагаемой форме есть ошибки типа "[Vue warn]: Duplicate keys detected: 'spider::'. This may cause an update error."

[Дмитрий Беляев]

ak_wi, поправил ответ

[ak_wi]

Дмитрий Беляев, спасибо! А как можно сделать в форме обязательные и не обязательные параметры и проверять их?

Если например size - это обязательный параметр?

[Дмитрий Беляев]

ak_wi, скорее всего массив animals Вы будете генерить из конфига, в этом же конфиге можно и заложить параметры для валидациями, а валидатор уже будет сверять данные по конфигу