Comment mettre à jour les données d'un VueJS instance à partir d'un appel AJAX jQuery?

J'ai un VueJS exemple, avec quelques données :

var vm = new Vue({
    el: '#root',
    data: {
        id: '',
        name: {
            firstname: "", 
            lastname: "", 
            country: "", 
            valueset: false
        },
//...

Dans mon code HTML, j'ai aussi :

<input class="id" type="text" size="4" maxlength="4" v-model.lazy="id" v-on:change="create_casenr">

Donc après le remplissage de ce champ, la méthode create_casenr de mon exemple est déclenchée.

create_casenr: function(event) {
    //update the full name of user
    $.ajax({
        url: 'http://elk.example.com:9200/users/user/' + this.id
    })
    .done(function(data) {
        console.log(data);
        this.name = data._source;
        this.name.valueset = true;
        console.log(this.name);
    })
//...

Ce qui se passe, c'est que :

  • create_casenr est appelé le changement dans le domaine (OK)
  • de l'appel AJAX va traverser avec succès, je vois le résultat attendu sur la console pour les dataet this.name (OK)
  • mais name n'est pas mis à jour dans l'instance de VueJS.

Je peux voir, il n'est pas mis à jour car d'autres parties de mon code qui s'appuient sur elle de ne pas le voir; j'ai aussi vérifié avec le VueJS Chrome add-on et toutes les variables sont correctement définies (y compris id), sauf pour name.

Est-il une manière que je devrait traiter les données d'un VueJS exemple lorsqu'ils sont modifiés par l'intermédiaire d'un appel AJAX jQuery?

OriginalL'auteur WoJ | 2016-10-24

  1. 10

    Vous avez un problème de portée de this.name dans votre AJAX gestionnaire de succès.

    La this.name à l'intérieur n'est pas le même que this.name dans votre Vue de composant. Si votre nom n'est pas défini dans la Vue component.

    Vous pouvez utiliser la flèche fonctions pour obtenir autour de cette question:

    $.ajax({
    url: 'http://elk.example.com:9200/users/user/' + this.id
    }).done(data => {
        this.name = data._source;  //'this' points to outside scope
        this.name.valueset = true;
    });

    Similaire réponse: https://stackoverflow.com/a/40200989/654825

    Plus d'infos sur la Flèche fonctions: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

    Pour les futurs lecteurs: la flèche de la fonction n'est pas pris en charge par IE en octobre 2016 (et probablement ne sera jamais comme IE 11 est le dernier IE). Edge, Chrome, Firefox ne fonctionne.
    Oui, IE11 ne prend pas en charge flèche fonctions. Mais lors de l'utilisation de vue-de la cli pour en faire une production de construire, babel compilateur prend en charge de la conversion flèche fonctions à l'ES5 du code compatible. De sorte que vous pouvez toujours utiliser la flèche fonctions, mais ne l'ensemble du développement dans Chrome / Firefox, et du test final, IE11.
    Merci, je ne connaissais pas vue-cli.

    OriginalL'auteur Mani

  2. 5

    pas même portée pour this.name

    create_casenr: function(event) {
//update the full name of user
$.ajax({
    url: 'http://elk.example.com:9200/users/user/' + this.id
})
.done(function(data) {
    console.log(data);
    this.name = data._source;
    this.name.valueset = true;
    console.log(this.name);
}.bind(this))

    ajouter un bind(this)

    Il ressemble à .bind() est supprimée de la version de jQuery 3 et découragé plus tôt (selon api.jquery.com/bind)
    il est lié ES5.1 fonction de lier interne de cette fonction anonyme, voir ici : developer.mozilla.org/fr/docs/Web/JavaScript/Reference/... et il n'est pas obsolète 😉

    OriginalL'auteur highFlyingSmurfs