Задание 2: Реализовать добавление нового элемента (займа) в список (loan list) — при отправке формы должны передаваться значения amount и type, наверх эмитится событие с данными, родительский компонент добавляет новый объект (с id, amount, type) в массив, после чего форма сбрасывается (очищается).

Форма хранит amount/type, эмитит проверенные значения, а родитель создаёт id и добавляет запись. Ниже пример Vue 3 с локальным списком.

Компонент LoanForm.vue:

<script setup>
import { ref } from 'vue';
const emit = defineEmits(['add']);
const amount = ref('');
const type = ref('');
const submit = () => {
  const value = Number(amount.value);
  const kind = type.value.trim();
  if (!Number.isFinite(value) || value <= 0 || !kind) return;
  emit('add', { amount: value, type: kind });
  amount.value = '';
  type.value = '';
};
</script>
<template>
  <form @submit.prevent="submit">
    <input v-model="amount" type="number" step="any" required aria-label="Сумма">
    <input v-model="type" required aria-label="Тип">
    <button>Добавить</button>
  </form>
</template>

В родительском script setup: const loans = ref([]); let nextId = 1; const addLoan = data => loans.value.push({ id: nextId++, ...data });, в шаблоне — <LoanForm @add="addLoan" />. Родитель импортирует ref и LoanForm. Счётчик подходит только для этого локального примера; постоянный id и бизнес-валидацию обычно обеспечивает backend. При асинхронном сохранении форму очищают после подтверждённого успеха.