模态中不能有表单-Vue组件

时间:2019-03-01 20:07:18

标签: javascript vue.js vuejs2 vue-component

我正在尝试创建一个使用槽口形式的模态。我想将设计保留在模式屏幕上,然后将提交按钮放在页脚插槽中。

由于某种原因,它不允许我在主体插槽中打开表单标签,然后在页脚中将其关闭。

一种解决方案是将所有内容放在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>

2 个答案:

答案 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>