@click vue calls form validate in laravel

Question

I've got a problem which I cannot explain myself: In my Laravel view I include a form as follows

{!! Form::open(array('route' => ['reports.store', $project->id], 'data-parsley-validate' => '','class' => 'form-horizontal')) !!}
... Some <div class="form-group"> ...

And then I include within the form my vue

<hirings-form
  :jobs="{{$jobs}}"
  :employees="{{$employees}}"
></hirings-form>

In the vue I have the following

<template>
<div class="container">
    <div class="row">
        <table class="table table-responsive table-striped">
            <thead>
                <tr>
                    <td>
                        Anstellung
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Von
                    </td>
                    <td>
                        Bis
                    </td>
                </tr>
            </thead>

            <tbody>
                <tr v-for="row in tableRows">
                    <td>
                        <select class="form-control" id="workerJob" name="workerJob[]" v-model="jmodel[row]">
                            <option :value="job.id"
                                v-for="job in jobs">{{job.job_title}}</option>
                            }
                        </select>
                    </td>

                    <td>
                        <input type="text" class="form-control" id="workerName" name="workerName[]" />
                    </td>

                    <td>
                        <input type="time" class="form-control" id="workedFrom" name="workedFrom[]" />
                    </td>

                    <td>
                      <input type="time" class="form-control"
                       id="workedTill" name="workedTill[]" />
                    </td>
                </tr>
            </tbody>
        </table>

        <button class="btn btn-primary" @click='addTableRow()'>
          <i class="fa fa-plus"></i>
        </button>
    </div>
  </div>
</template>

<script>
  export default {
    props: [
        'jobs',
        'employees',
    ],
    data() {
        return {
            jmodel: [],
            tableRows: [0],
            counter: 0,
        }
    },

    methods: {
        addTableRow: function() {
            this.counter += 1;
            this.tableRows.push(this.counter);
            console.log(this.tableRows);
            return false;
        }
     }
  }
</script>

So what are am I trying to do? I want that table in my vue starting with one row, where I can select the employees job, add the employees name etc. If there is another employee needs to be added, I can click on the plus button and a new row is added. That works perfectly, but laravel's standard form-validator is checking the fields. For testing purposes I deactivated the validator, so if I am clicking the add/plus button the form will be send. Why that? I have that send button on the very end of the form:

{{ Form::submit('Erstellen', array('class' => 'btn btn-success')) }}

before I do

{!! Form::close() !!}

Why is Laravel sending my form when pressing the add/plus button? Btw. the submit button works as expected.

Does anyone has a clue? Thanks in advance.

Jacob Goh Jacob Goh · Accepted Answer · 2018-03-02T09:07:34

seems like clicking on the button is triggering the form submission.

try making the click event listener into @click.prevent="..." . This will have the effect of event.preventDefault() on the click event, thus preventing form submission.

@click vue calls form validate in laravel

1 Answers