[Vuejs]-Can't have a form in modal – Vue Component

by

0👍

Keeping it in the body is not one solution but it is the valid syntax, Unless the HTML syntax has changed, which we doubt, you cannot start a tag anywhere and end it wherever.

Now to your solution, have you tried having the whole
Footer inside the body?
Another possible way is to not have the type=submit button and just have a normal button and handle its click. In your on click handler you will already have the form data.

0👍

Maybe move the form outside, to contain both slots. No sure if something like this will work for you because your template is not complete but:

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

Leave a comment