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

时间:2018-03-02 08:20:26

标签: javascript php forms laravel vue.js

我遇到了一个我无法解释的问题: 在我的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在按下添加/加号按钮时发送表单?顺便说一句。提交按钮按预期工作。

有没有人有线索? 提前谢谢。

1 个答案:

答案 0 :(得分:0)

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

尝试将click事件侦听器设置为@click.prevent="..."。这将对点击事件产生event.preventDefault()的影响,从而阻止表单提交。