Tenho uma função que ajuda a filtrar dados. Estou usando v-on:change
quando um usuário altera a seleção, mas também preciso que a função seja chamada antes mesmo de o usuário selecionar os dados. Eu fiz o mesmo com o AngularJS
uso anterior, ng-init
mas entendo que não existe tal diretiva emvue.js
Esta é minha função:
getUnits: function () {
var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};
this.$http.post('/admin/units', input).then(function (response) {
console.log(response.data);
this.units = response.data;
}, function (response) {
console.log(response)
});
}
No blade
arquivo utilizo formulários blade para realizar os filtros:
<div class="large-2 columns">
{!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
</div>
<div class="large-3 columns">
{!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}
</div>
Isso funciona bem quando eu seleciono um item específico. Então, se eu clicar em todos all floors
, digamos , funciona. O que eu preciso é que quando a página for carregada, ele chame o getUnits
método que fará o $http.post
com a entrada vazia. No back-end, lidei com a solicitação de forma que, se a entrada estiver vazia, ela fornecerá todos os dados.
Como posso fazer isso vuejs2
?
Meu código: http://jsfiddle.net/q83bnLrx