Javascript Girl
  1. Javascript Girl
  3. Comment déclencher la fonction après la modification du modèle v?
Intereting Posts
Modifier la variable globale dans la fermeture de JavaScript Comment contourner la politique d'origine croisée Li comme élément sélectionné en utilisant vanilla Javascript Recevoir des données de .js dans server.R brillant Backbone Router naviguer et ancrer href Même localStorage pour http et https? Stocker le fichier image dans les données binaires dans le schéma de mangouste et afficher l'image sous forme html Test du support matériel dans Javascript pour les événements d'orientation du périphérique de l'iPhone 3GS Les déclarations de fonction mai peuvent-elles apparaître dans des instructions internes en JavaScript? JSF enroule-t-il onLoad? Placeholder in contenteditable – focus event issue Comment obtenir des données de tableau POSTed (jquery) dans Node.js (en utilisant express) Modèles réactifs de météorite et Dépendance de deps – Mettre à jour un modèle lorsque l'autre change ou est re / rendu Comment puis-je passer des arguments aux gestionnaires d'événements dans jQuery? Poursuivre certaines tâches avec grogner même si l'on échoue

Comment déclencher la fonction après la modification du modèle v?

J'ai une entrée que j'utilise pour filtrer mon ensemble d'objets dans Vue. J'utilise Salvattore pour construire une grille de mes éléments filtrés, mais cela ne fonctionne pas trop bien. Je pense que je dois appeler rescanMediaQueries (); Fonction après mon changement de modèle v, mais ne peut pas comprendre comment.

Voici mon exemple de Vue: 

var articlesVM = new Vue({ el: '#search', data: { articles: [], searchInput: null }, ready: function() { this.$http.get('posts').then(function (response) { this.articles = response.body; }); } });

Et voici comment j'ai construit ma recherche 

 <div class="container" id="search"> <div class="input-field col s6 m4"> <input v-model="searchInput" class="center-align" id="searchInput" type="text" > <label class="center-align" for="searchInput"> search... </label> </div> <div id="search-grid" v-show="searchInput" data-columns> <article v-for="article in articles | filterBy searchInput"> <div class="card"> <div class="card-image" v-if="article.media" v-html="article.media"></div> <div class="card-content"> <h2 class="card-title center-align"> <a v-bind:href="article.link">{{ article.title }}</a> </h2> <div class="card-excerpt" v-html="article.excerpt"></div> </div> <div class="card-action"> <a v-bind:href="article.link"><?php _e('Read More', 'sage'); ?></a> </div> </div> </article> </div>

J'ai fait fonctionner le système de grille en ajoutant une option de montre à mon Vue, mais chaque fois que j'écris quelque chose à mes commentaires, puis effacez-le, ma méthode de filtrage ne fonctionnerait pas du tout. Il n'a pas rempli de données, même si j'ai essayé de retaper le même mot-clé que précédemment. Voici l'option de montre que j'ai utilisée: 

 watch: { searchInput: function (){ salvattore.rescanMediaQueries(); } }

Je pense que votre problème réside dans la détermination de this problème dans votre gestionnaire de réussite pour http. L'objet de vos articles dans le composant Vue ne reçoit aucune valeur de votre gestionnaire de réussite http.get(..) .

Dans votre fonction ready , votre gestionnaire de réussite http devrait être comme suit: 

 this.$http.get('posts').then(response => { this.articles = response.body; // 'this' belongs to outside scope });`

Alternativement, vous pouvez également: 

 var self = this; // self points to 'this' of Vue component this.$http.get('posts').then(response => { self.articles = response.body; // 'self' points to 'this' of outside scope });`

Un autre problème similaire: https://stackoverflow.com/a/40090728/654825

Encore une chose – il est préférable de définir les données comme une fonction, comme suit: 

 var articlesVM = new Vue({ el: '#search', data: function() { return { articles: [], searchInput: null } }, ... }

Cela garantit que votre objet articles est unique à cette instance du composant (lorsque vous utilisez le même composant à plusieurs endroits de votre application).

Edité après le commentaire # 1

Le code suivant semble fonctionner correctement, la fonction de watch fonctionne parfaitement: 

 var vm = new Vue({ el: '#search', template: `<input v-model="searchInput" class="center-align" id="searchInput" type="text" >`, data: { searchInput: "" }, watch: { searchInput: function() { console.log("searchInput changed to " + this.searchInput); } } })

L' input dans le modèle est une copie exacte de votre version. J'ai même configuré l' id avec le v-model , bien que je ne vois pas la raison de définir un id

Vue.js version: 2.0.3

Je ne peux pas voir plus loin, en fonction des détails de la question. Pouvez-vous vérifier si votre code correspond à celui ci-dessus et voir si vous pouvez obtenir les messages de débogage de la console?

Edité après le commentaire # 4, # 5

Voici une autre pensée que vous devez vérifier:

  • Rôle de vue.js: Rendez le DOM
  • Rôle du plugin salvatore: Créez les mises en page DOM uniquement en utilisant CSS

En supposant que ce qui précède est vrai pour le plugin salvatore, et, espérons-le, il ne fait pas de problèmes avec les observateurs / getters / setters de vue.js, vous pouvez faire ce qui suit: procurer un délai d'environ 50 ms pour que vue.js termine le rendu et Puis appelez le plugin salvatore pour effectuer les mises en page.

Votre fonction de surveillance doit donc être la suivante: 

 watch: { searchInput: function (){ setTimeout(function(){ salvattore.rescanMediaQueries(); }, 50); } }

Vous pouvez également utiliser Vue.nexttick() comme suit: 

 Vue.nextTick(function () { // DOM updated })

The nextTick est documenté ici: https://vuejs.org/api/#Vue-nextTick

Je ne sais pas si vous devrez peut-être fournir un peu de temps supplémentaire pour le plugin salvatore pour commencer les mises en page, mais l'un des éléments ci-dessus devrait fonctionner.

Faites-moi savoir si cela fonctionne!