Как создать динамические поля ввода vue3?

Question

[udavo]

Здравствуйте!
Для моего проекта требуется реализовать динамическое добавление inputОв "тем" и её "подтем" во vue (т.е при создании темы добавляется инпут темы и подтемы, а так же в тему можно добавить ещё сколь угодно подтем).
На просторах интернета нашел гайд в котором это реализовано через push, и это работает, но только для создания подтем. Если создать ещё одну тему то значения подтем будут дублироваться, да ещё и во всех темах появится лишний инпут.
Собственно что я "накодил":
SCRIPT SETUP

let podtema = reactive([{
    text: '',
    hours: 0
}]);
//Массив с подтемами

function addP() {
    podtema.push({text: '', hours: 0})

}
//Добавление подтемы

function rmP(index) {
    podtema.splice(index, 1)
}
//Удаление подтемы

const form = reactive([{
    tma: {
        temaN: '',
        p: podtema
    }
}])
//форма

const addT = () => {

   form.push({
       tma: {
           temaN: '',
           p: podtema


       }
   })
}
//добавление темы

TEMPLATE

<div  v-for="(it, idx) in form" :key="it" class="w-full border-b border-eee mb-6 flex justify-between flex-col ">
           <div class="flex flex-col">
               <div>
                   <Input
                   id="tema"
                   type="text"
                   class="mt-1 block w-1/2 mb-6"
                   v-model="it.tma.temaN"
                   required/>
               </div>
               <div v-for="(item, index) in podtema" :key="item" class="flex flex-row justify-between mx-16">
                   <Input
                       id="podtema"
                       type="text"
                       class="mt-1 block w-2/4 mr-1 mb-6"
                       v-model="item.text"
                       required
                   />
                   <button v-if="index > 0" @click="rmP(index)">удалить подтему</button>
               </div>
           </div>
            <button @click="addP">Добавить подтему</button>
            <button @click="addT(idx)">Добавить тему</button>
        </div>

Заранее спасибо)

Answer 1

[0xD34F]

const createTopic = () => ({
  text: '',
  subtopics: [ createSubTopic() ],
});

const createSubTopic = () => ({
  text: '',
});

const topics = reactive([ createTopic() ]);

<div v-for="(topic, iTopic) in topics">
  <div>
    <div>
      Topic #{{ iTopic + 1 }}:
      <input v-model="topic.text">
    </div>
    <div v-for="(subtopic, iSubtopic) in topic.subtopics">
      Subtopic #{{ iTopic + 1 }}.{{ iSubtopic + 1 }}:
      <input v-model="subtopic.text">
      <button v-if="iSubtopic" @click="topic.subtopics.splice(iSubtopic, 1)">x</button>
    </div>
  </div>
  <button @click="topic.subtopics.push(createSubTopic())">Add subtopic</button>
</div>
<button @click="topics.push(createTopic())">Add topic</button>

Comments

[udavo]

Спасибо большое!