我想使用vue.js
从数据库中过滤数据在刀片文件中,我有以下内容:
<div class="row" id="filterUnits">
@{{message}}
{!! Form::open() !!}
<div class="large-3 columns">
{!! Form::select('block', getBlocks($site),null,['class'=>'form-control', 'placeholder'=>'All blocks', 'v-model'=>'block', 'v-on:change'=>'getUnits()']) !!}
</div>
<div class="large-2 columns">
{!! Form::text('name', null,['class'=>'form-control', 'placeHolder'=>'Enter unit name']) !!}
</div>
<div class="large-2 columns">
{!! Form::select('floor', getSiteFloors($site),null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
</div>
<div class="large-2 columns">
{!! Form::select('bedroom', getSiteBedrooms($site),null, ['class'=>'form-control', 'placeholder'=>'All Bedrooms', 'v-model'=>'bedroom', 'v-on:change'=>'getUnits()' ]) !!}
</div>
<div class="large-2 columns">
{!! Form::select('status', getUnitStatus(),null, ['class'=>'form-control', 'placeholder'=>'All Status', 'v-model'=>'status', 'v-on:change'=>'getUnits()' ]) !!}
</div>
{!! Form::close() !!}
在我的app.js中:
new Vue({
el: '#filterUnits',
data: {
message: "Hey there Vue!",
units: this.units
},
methods: {
getUnits: function (unit) {
this.$http.post('/admin/units').then(function (response) {
console.log(response.data);
this.units = response.data;
}, function (response) {
console.log(response)
});
}
}
});
在后端,我收到请求数据并执行过滤器,该代码没问题。当我检查请求数据时,上面路由调用的函数收到它时,即使我选择了其余的,它也只是第一个输入{block: "1"}
。如果我根本不选择block
并选择让我们说floor
,则收到的请求是一个空数组。
我尝试传递这样的输入:
this.$http.post('/admin/units', {block: this.block,floor: this.floor,bedroom: this.bedroom,status: this.status}).then(function (response)...
但它没有帮助。