Задание 1: В приложении Vue уже импортирован компонент AddLoan (форма добавления займа). Нужно сделать так, чтобы эта форма была скрыта по умолчанию и появлялась/пряталась по нажатию на кнопку (реализовать переключение видимости формы, например через v-if/v-show и flag/toggle, а также эмит события закрытия формы из компонента наверх).

Храните флаг видимости в родителе, переключайте его кнопкой и обрабатывайте событие close от AddLoan.

Короткий ответ

Что ответить на собеседовании

Храните флаг видимости в родителе, переключайте его кнопкой и обрабатывайте событие close от AddLoan.

Подробный разбор

Ответ с пояснениями

Храните флаг видимости в родителе, переключайте его кнопкой и обрабатывайте событие close от AddLoan.

Фрагменты родителя Vue 3, где AddLoan уже импортирован:

<script setup>
import { ref } from 'vue';
const isOpen = ref(false);
</script>
<template>
  <button type="button" @click="isOpen = !isOpen">{{ isOpen ? 'Скрыть форму' : 'Добавить заём' }}</button>
  <AddLoan v-if="isOpen" @close="isOpen = false" />
</template>

В AddLoan объявляют const emit = defineEmits(['close']) и вызывают emit('close') из кнопки закрытия. v-if сбрасывает локальное состояние формы при повторном создании; v-show подходит, если его нужно сохранять.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее