Не может быть формы в модальном режиме - Vue Component
Я пытаюсь создать модальное окно с формой, которая использует слоты. Я хочу сохранить дизайн на модальном экране и поместить кнопки отправки в слот нижнего колонтитула.
По какой-то причине это не позволяет мне открыть тег формы в слоте body, а затем закрыть его в нижнем колонтитуле.
Одно из решений — поместить все в тег body, но тогда я упускаю стиль нижнего колонтитула.
Любые решения для этого?
<h3 slot = "header">Add Folder</h3>
<span slot = "body">
<form @submit.prevent = "addFolder">
<div class = "form-group" v-bind:class = "(this.errors.filter(e => e.name === 'name').length > 0) ?'form-error':'' ">
<label for = "name">Name</label>
<input type = "text" name = "name" class = "form-control" aria-label = "name" v-model = "folder.name" />
</div>
</span>
<span slot = "footer">
<input type = "submit" class = "btn-success js-scroll-trigger" value = "Add" />
<button class = "btn-edit js-scroll-trigger" @click = "showAddFolderModal = false">Cancel</button>
</form>
</span>
</modal>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Сохранение его в теле не является единственным решением, но это допустимый синтаксис. Если синтаксис HTML не изменился, в чем мы сомневаемся, вы не можете начинать тег где угодно и заканчивать его где угодно.
Теперь к вашему решению, вы пробовали иметь все Нижний колонтитул внутри тела? Другой возможный способ - не иметь кнопку type=submit, а просто иметь обычную кнопку и обрабатывать ее нажатие. В вашем обработчике кликов у вас уже будут данные формы.
Возможно, переместите форму наружу, чтобы она содержала оба слота. Не уверен, что что-то подобное сработает для вас, потому что ваш шаблон не завершен, но:
<template>
<div>
<modal>
<h3 slot = "header">Add Folder</h3>
<form @submit.prevent = "addFolder">
<span slot = "body">
<div class = "form-group" v-bind:class = "(this.errors.filter(e => e.name === 'name').length > 0) ?'form-error':'' ">
<label for = "name">Name</label>
<input type = "text" name = "name" class = "form-control" aria-label = "name" v-model = "folder.name" />
</div>
</span>
<span slot = "footer">
<input type = "submit" class = "btn-success js-scroll-trigger" value = "Add" />
<button class = "btn-edit js-scroll-trigger" @click = "showAddFolderModal = false">Cancel</button>
</span>
</form>
</modal>
</div>
</template>