@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="..." 。 這將對click事件具有event.preventDefault()的效果，從而阻止表單提交。