Я хочу отфильтровать данные из базы данных, используя 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)...
но это не помогает
Задача ещё не решена.
Других решений пока нет …