J'ai une fonction qui aide à filtrer les données. J'utilise v-on:change
lorsqu'un utilisateur modifie la sélection, mais j'ai également besoin que la fonction soit appelée avant même que l'utilisateur sélectionne les données. J'ai fait la même chose avec AngularJS
l'utilisation précédente, ng-init
mais je comprends qu'il n'y a pas une telle directive dansvue.js
C'est ma fonction:
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)
});
}
Dans le blade
fichier, j'utilise des formulaires de lame pour effectuer les filtres:
<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>
Cela fonctionne bien lorsque je sélectionne un élément spécifique. Ensuite, si je clique sur tout all floors
, disons , cela fonctionne. Ce dont j'ai besoin, c'est lorsque la page est chargée, elle appelle la getUnits
méthode qui effectuera le $http.post
avec une entrée vide. Dans le backend, j'ai traité la demande de manière à ce que si l'entrée est vide, elle donnera toutes les données.
Comment puis-je faire cela vuejs2
?
Mon code: http://jsfiddle.net/q83bnLrx
la source
Vous devez faire quelque chose comme ça (si vous voulez appeler la méthode au chargement de la page):
new Vue({ // ... methods:{ getUnits: function() {...} }, created: function(){ this.getUnits() } });
la source
created
plutôt.vous pouvez également le faire en utilisant
mounted
https://vuejs.org/v2/guide/migration.html#ready-replaced
.... methods:{ getUnits: function() {...} }, mounted: function(){ this.$nextTick(this.getUnits) } ....
la source
Sachez que lorsque l'
mounted
événement est déclenché sur un composant, tous les composants Vue ne sont pas encore remplacés, le DOM peut donc ne pas être encore définitif.Pour vraiment simuler l'
onload
événement DOM , c'est-à-dire pour se déclencher une fois que le DOM est prêt mais avant que la page ne soit dessinée, utilisez vm. $ NextTick de l'intérieurmounted
:mounted: function () { this.$nextTick(function () { // Will be executed when the DOM is ready }) }
la source
Si vous obtenez des données dans un tableau, vous pouvez faire comme ci-dessous. Ça a marché pour moi
<template> {{ id }} </template> <script> import axios from "axios"; export default { name: 'HelloWorld', data () { return { id: "", } }, mounted() { axios({ method: "GET", "url": "https://localhost:42/api/getdata" }).then(result => { console.log(result.data[0].LoginId); this.id = result.data[0].LoginId; }, error => { console.error(error); }); }, </script>
la source