Javascript Girl
  1. Javascript Girl
  3. Comment mettre à jour les données sur une page sans rafraichir sur vue.js?
Intereting Posts
Bind () à un widget souncloud dynamiquement intégré Comment puis-je lier le contenu html <title> dans vuejs? Jquery: Cacher tous les enfants, puis afficher un élément spécifique Comment puis-je supprimer un objet d'un tableau avec JavaScript? Comment puis-je chaîner mes appels de méthodes? Comment gérer ajax 201 Comment mapper de façon dynamique un objet de réponse json à une entité? Comment puis-je obtenir un pied de page flottant pour rester au bas de la fenêtre dans IE 6? Time Interval entre deux requêtes CORS utilisant jquery ajax Quels fichiers javascript ne sont PAS utilisés sur le chargement de la page Parse.com JavaScript SDK inclut, mais ne fonctionne pas Liste de sélection de plusieurs colonnes HTML Écoutez tous les événements émis dans Node.js Comment charger l'éditeur d'as Les modèles de guidons précompilés renvoient une valeur indéfinie

Comment mettre à jour les données sur une page sans rafraichir sur vue.js?

Mon point de vue est comme ceci: 

<div class="favorite" style="margin-bottom:5px;"> @if (Auth::user()) <add-favorite-store :id-store="{{ $store->id }}"></add-favorite-store> @else <a href="javascript:" class="btn btn-block btn-success"> <span class="fa fa-heart"></span>&nbsp;Favorite </a> @endif </div>

Mon composant est comme ceci: 

 <template> <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteStore($event)"> <span class="fa fa-heart"></span>&nbsp;<label id="favoriteId">{{ store_id == 'responseFound' ? 'Un-Favorite' : 'Favorite' }}</label> </a> </template> <script> export default{ props:['idStore'], mounted(){ this.checkFavoriteStore() }, methods:{ addFavoriteStore(event){ var label = $('#favoriteId') var text = label.text() event.target.disabled = true const payload= {id_store: this.idStore} if(text == "Favorite") { this.$store.dispatch('addFavoriteStore', payload) } else { this.$store.dispatch('deleteFavoriteStore', payload) } setTimeout(function () { location.reload(true) }, 1500) }, checkFavoriteStore(){ const payload= {id_store: this.idStore} var data = this.$store.dispatch('checkFavoriteStore', payload) data.then((res) => this.store_id = res) } }, data() { return { store_id: '' } } } </script>

Sur mon code ci-dessus, j'utilise

Location.reload (true)

Pour mettre à jour les données sur la page. Mais c'est recharger la page.

Je veux quand mettre à jour la page, il ne faut pas recharger la page

Comment puis-je le faire?

Ok Voici un cas d'utilisation simple, mais moins compliqué que le vôtre et l'utilisation de vuejs tel qu'il devrait être utilisé. ( http://codepen.io/simondavies/pen/MJOQEW )

OK laissez laravel / php code obtenir l'identifiant de la boutique ainsi que si elle était déjà favorisée. De cette façon, votre script ne vérifie pas le magasin pour décider quoi faire.

Ce que cela fait, c'est envoie le store-id la store-id et l' is-favorited travers le composant comme: 

  <favorite :store-id="{{$store->id}}" :is-favorited="{{$store->isFavorited}}"></favorite>

Ensuite, le composant Vue mettra à jour le bouton pour afficher si son déjà aimé (rouge) ou non (gris), puis gère également l'événement de clic et la mise à jour en conséquence.

Comme vous utilisez Laravel pour indiquer le composant s'il est déjà favorisé, vous pouvez vous débarrasser de votre fonction de vérification et une demande HTTP de moins. Ensuite, il vous suffit de mettre à jour le magasin lorsque l'utilisateur clique sur le bouton préféré.

Et comme on l'a vu dans la démo, il est mis à jour, il n'est pas nécessaire de rafraîchir.

J'espère que cela vous aidera à réécrire le vôtre afin que vous obteniez ce que vous voulez.

PS j'ai laissé de côté la vérification de @if (Auth::user()) IN @if (Auth::user()) vous avez pour que vous puissiez la remettre dans etc. 

 Vue.component('favorite', { template: '<button type="button" @click.prevent="updateFaviteOption" :class="{ \'is-favorited\': isFavorited }"><span class="fa fa-heart"></span></button>', props: [ 'storeId', 'isFavorited' ], data: function() { return {} }, methods: { updateFaviteOption: function() { this.isFavorited = !this.isFavorited; ///-- DO YOU AJAX HERE i use axios ///-- so you can updte the store the the this.isFavorited } } }); new Vue({ el: '#app', }); 
 .favorite-wrapper { margin: 20px auto; padding: 0; text-align: center; width: 500px; height: 100px; } a:link, a:active, a:visited { text-decoration: none; text-transform: uppercase; color: #444; transition: color 800ms; font-size: 18px; } a:hover, a:hover:visited { color: purple; } button { margin: 10px auto; padding: 8px 10px; background: transparent; width: auto; color: white; text-transform: uppercase; transition: color 800ms; border-radius: 4px; border: none; outline: none; } button:hover { cursor: pointer; color: #058A29; } .fa { color: #d9d9d9; font-size: 20px; transition: color 400ms, transform 400ms; opacity: 1; } .is-favorited .fa { opacity: 1; color: red; transform: scale(1.4); } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" /> <div id="app"> <div class="favorite-wrapper"> <favorite :store-id="3" :is-favorited="true"> </favorite> </div> </div>

Une autre solution expliquée dans le document vue-router . Il suffit d'utiliser le système de watch appliqué à l'attribut natif $route . Vous pourrez détecter une nouvelle route même s'ils utilisent le même composant et récupérer les données en conséquence.

Il y a beaucoup de choses qui ne sont pas mentionnées ici pour aider à répondre à la question aussi bien que nous le pouvons, il a besoin du html en question, de ce qu'il faut mettre à jour et de quoi, etc.

Je pense qu'il est préférable de regarder cette https://laracasts.com/series/learn-vue-2-step-by-step pour une bonne compréhension de la façon dont funciona Vuejs et comment faire des choses simples comme ceci.

Votre codage de type approfondie de type store / vuex et si vous ne comprenez pas les bases, il peut être difficile de trouver la réponse pour vous.

Désolé d'être un peu bla mais.

Ce dont vous avez besoin, c'est vm-forceUpdate.

Forcer l'instance Vue à re-render. Notez qu'il n'affecte pas tous les composants enfants, seule l'instance elle-même et les composants enfants avec le contenu de l'emplacement inséré.

Je n'ai pas essayé d'utiliser cela moi-même, je l'ai rencontré tout en travaillant sur un projet.

Vue forceUpdate

ou

Vous pouvez simplement appeler la fonction dans la méthode setTimeout. 

  setTimeout(function () { this.checkFavoriteStore(); }, 1500)

Vous utilisez beaucoup de javascript ici, vous pouvez utiliser vue pour faire la plupart du travail là-bas.