@ak_wi

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

Есть массив животных, в котором у каждого животного есть некоторое количество разных параметров:
animals: [
                    {
                        name: "spider",
                        params: [
                            "size",
                            "legsCount",
                            "weight"
                        ]
                    },
                    {
                        name: "dog",
                        params: [
                            "weight",
                            "breed",
                            "height",
                            "color"
                        ]
                    }
                ]


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

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

{
                        name: "spider",
                        params: {
                            "size": '1cm',
                            "legsCount": 8,
                            "weight": 8
                        }
                    },
  • Вопрос задан
  • 145 просмотров
Решения вопроса 1
bingo347
@bingo347
Бородатый программер
<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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы