@click vue在laravel中调用表单验证

Question

我遇到了一个我无法解释的问题：在我的Laravel视图中，我提供了如下表格

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

然后我在表单中包含我的vue

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

在vue我有以下

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

那么我想做什么呢？我希望我的vue中的那个表从一行开始，在那里我可以选择员工职位，添加员工姓名等。如果需要添加另一个员工，我可以点击加号按钮并添加一个新行。这很有效，但是laravel的标准形式验证器正在检查字段。出于测试目的，我停用了验证器，因此如果我单击添加/加号按钮，将发送表单。为什么？我在表单的最后有一个发送按钮：

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

在我做之前

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

为什么Laravel在按下添加/加号按钮时发送我的表单？顺便说一句。提交按钮按预期工作。

有人有线索吗？提前致谢。

Answer 1

似乎点击按钮触发表单提交。

尝试将click事件监听器放入@click.prevent="..."。这将使event.preventDefault()对click事件产生影响，从而阻止表单提交。