我遇到了一个我无法解释的问题: 在我的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在按下添加/加号按钮时发送表单?顺便说一句。提交按钮按预期工作。
有没有人有线索? 提前谢谢。
答案 0 :(得分:0)
似乎点击按钮会触发表单提交。
尝试将click事件侦听器设置为@click.prevent="..."
。这将对点击事件产生event.preventDefault()
的影响,从而阻止表单提交。