我正在尝试创建一个使用槽口形式的模态。我想将设计保留在模式屏幕上,然后将提交按钮放在页脚插槽中。
由于某种原因,它不允许我在主体插槽中打开表单标签,然后在页脚中将其关闭。
一种解决方案是将所有内容放在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>
答案 0 :(得分:0)
将其保留在正文中不是一种解决方案,而是有效的语法,除非HTML语法发生了变化(我们对此表示怀疑,否则您无法在任何地方开始标记并在任何地方将其结束)。
现在,通过解决方案,您是否尝试了整个过程 体内的页脚? 另一种可能的方法是不具有type = submit按钮,而只有一个普通按钮并处理其单击。在点击处理程序中,您将已经具有表单数据。
答案 1 :(得分:0)
也许将表格移到外面,以包含两个插槽。不确定这种方法是否对您有用,因为您的模板不完整,但是:
<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>