Ce que je cherche est simple. Dès que je rendrai mon modèle, il effectuera un appel API vers mon serveur Web et restituera les données au modèle. Maintenant, je veux regarder ces données dans le composant vue pour les changements à venir. Chaque fois que quelque chose a changé, je souhaite mettre à jour le modèle avec les données provenant de l'API.
Une solution est que je pourrais écrire quelque chose comme une méthode de rafraîchissement qui sera appelée toutes les 10 secondes. (Tbh. C'est qch. Que je ne veux pas)
Je veux un moyen comme Angular avec des observateurs.
Btw. Je suis nouveau dans vue et j'ai commencé à apprendre Vue avec Laravel
Modifier: Mon code:
Vue.component
<template>
<div class="w-50">
<table class="table ">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" v-bind:key="user.id">
<td>{{ user.name }}</td>
<td>{{ user.timer }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
users: [],
user: {
id: '',
active: ''
}
};
},
mounted() {
axios.get('/users')
.then(res => {
this.users = res.data;
console.log(res.data);
})
}
}
</script>
J'ai fait ce que vous mentionnez ci-dessous. Mais la vue ne se met pas à jour si les données changent.
5 Réponses :
Vous n'avez inclus aucun code, je vais donc simplement ajouter mon exemple:
qui est une balise de modèle:
watch:{
'title': function (newVal, oldVal) {
// you can work with a new value here
},
}
script:
data(){
return {
title: '',
},
},
mounted(){
axios.get('/api/items/all').then(response => {
this.title = response.data.title;
});
}
et cela devrait suffire à Vue.js pour récupérer les modifications et rendre correctement un nouveau titre (dans mon exemple). Si vous souhaitez surveiller les modifications avant leur rendu, vous pouvez ajouter une propriété watch comme celle-ci:
<template>
<div>
<h1> {{title}} </h1>
</div>
</template>
Si vous avez besoin de plus d'informations à ce sujet , vous pouvez lire les documents Vue sur Propriétés et observateurs calculés .
p>
Ceci est correct bien que je voudrais également noter que vous n’avez même pas besoin de l’observateur pour que le modèle soit à nouveau rendu; le réglage des données réactives.title aura déjà le modèle afficher le nouveau titre. La question de l’op est trop limitée à mon avis; quel est le problème exact que vous rencontrez?
Oui, vous avez raison, c'est pourquoi j'ai séparé la propriété "watch" de la partie "principale" de ma réponse. Je soupçonne juste que OP veut quelque chose de plus.
Je suis d’accord - sa question n’est pas claire sur ce qu’il souhaite réaliser
Je ne reçois les données que via un droit d'appel API, l'étape suivante consiste à mettre à jour ma vue actuelle chaque fois que les données de ma base de données ont changé
Si vous pensez aux observateurs comme la transmission de messages via la publication et l'abonnement
Vue mettra à jour le modèle à chaque changement de données. L'autre chose est de savoir quand les données changent dans votre base de données.
Vous posez en quelque sorte 2 ou 3 questions en même temps, donc je vais essayer d'y répondre par parties.
Un remplacement direct des observables angulaires est le Système d'événements Vue. Vous pouvez écouter les événements avec this. $ On et arrêter d'écouter avec this. $ Off . Pour faire cette application à l'échelle de l'application, vous devez créer quelque chose comme un bus d'événements:
Vue.prototype.$bus = new Vue();
// in components
mounted () {
this.$bus.$on('myMessage', this.handleMyMessage);
},
beforeDestroy () {
this.$bus.$off('myMessage', this.handleMyMessage);
}
Cela dit, il ne semble pas que ce soit ce que vous voulez réellement utiliser. p>
Je soupçonne que vous voulez abuser de la méthode retry () pour refaire la requête encore et encore, mais honnêtement, il n'y a aucune raison de l'utiliser . Vous pouvez simplement placer la requête dans une méthode et l'appeler dans un intervalle.
Une meilleure méthode pour mettre à jour vos données peut être d'utiliser un serveur websocket, mais c'est quelque chose que vous devez configurer. Sans cela, vous devez soit faire les requêtes API à plusieurs reprises, soit ne pas vous donner la peine de l'actualiser jusqu'à ce que l'utilisateur le veuille.
Les données de Vue sont toujours réactives. Si les données référencées dans le modèle changent, le modèle est automatiquement renvoyé. Si vous modifiez un objet, vous devrez peut-être utiliser les méthodes d'assistance Vue.set ou Vue.delete ( docs ). Cela garantira que les données restent réactives et met donc à jour le modèle rendu.
Merci pour cette information. Im essayant de faire cela avec des websockets. Je pense que c'est la meilleure façon de résoudre mon problème. Pouvez-vous recommander des sites Web où ils présentent des solutions simples?
Vous pouvez utiliser vue-rx pour travailler avec des observables dans Vue.js.
La démo suivante fait un appel AJAX toutes les 10 secondes au service de l'API qui renvoie une blague aléatoire:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script src="https://unpkg.com/vue-rx@6.1.0/dist/vue-rx.js"></script>
<div id="demo">{{ joke }}</div>
new Vue({
el: '#demo',
subscriptions: function () {
return {
joke: rxjs.timer(0, 10000).pipe(
rxjs.operators.switchMap(() => rxjs.ajax.ajax('https://geek-jokes.sameerkumar.website/api')),
rxjs.operators.map(res => res.response)
)
}
}
})
Je vais jeter un œil à quelque chose comme Socket.IO . Il utilise Websocket, donc une connexion bidirectionnelle entre votre client et le serveur. Cela permet au serveur d'informer votre site Web des modifications et d'alimenter ces données sans que vous ayez à les interroger (il convient de noter que socketio recherchera des informations si Websocket n'est pas pris en charge).
Merci pour votre réponse. Fera quelques recherches ce soir.
Laravel est livré avec une solution prête à l'emploi pour mon problème. Le mot clé pour cela est les événements de diffusion . Avec cette approche, il est vraiment facile de gérer les connexions de socket. En plus de cette merveilleuse fonctionnalité, vous pouvez utiliser Socket.io et Redis.
Laravel Doc: https://laravel.com/docs/5.7/broadcasting < / p>
Comme je ne savais pas que vue restitue toujours le modèle chaque fois que mes données ont changé, il n'y a plus besoin de sth. comme un observateur dans Angular
Vous pouvez utiliser quelque chose comme socketio qui utilise des sockets Web. Il transmettra des données à votre site lorsqu'il y aura des données. #
C'est une bonne idée. Je ferai quelques recherches ce soir (Mb laravel fournit quelques utilitaires utiles prêts à l'emploi)