comment déclencher une fonction dans vuejs après le chargement de la page?

Question

J'essaie de déclencher une fonction qui cache ou montre les images sur la base de données que j'ai écrites deux fonction une qui appelle l'api qui est dans le crochet créé et la deuxième fonction qui rend l'image. Le problème est de savoir comment j'appelle cette deuxième fonction après que le dom est chargé, en ce moment quand j'essaie d'appeler la première fonction ou créé il me renvoie l'erreur que css ne peut pas être changé de null.J'ai essayé d'utiliser la fonction montée avec newtick mais son tir encore les render_badges fonctionnent d'abord et par conséquent, les valeurs sont nulles à l'intérieur

créé: function() { this.loadlike()

}, 

methods:{ 
     loadlike:function(){ 
     var self = this 
     this.$http.get('/api/user_profile').then(function (res) { 
      self.tasksdata = res.body 
      self.badges = self.tasksdata.data2 
      console.log(self.badges) 
      console.log(this.tasksdata) 
      console.log(this.max) 

     }) 
     }, 


     getHumanDate : function (date) { 

       return moment(date, 'YYYY-MM-DD hh-mm-ss').locale("en-gb").format('LL'); 

      }, 


      render_badges:function(){ 
       var self = this 
       var counter = 0; 
       self.badges.map(function(e){ 
        counter ++; 
        console.log(counter) 
        if(counter <=self.max){ 
         document.getElementById("i").style.display = "initial"; 
        } 
        else{ 
         document.getElementById("i").style.display = "none"; 

        } 
       }) 

      }, 

mounted: function() { 
    this.$nextTick(function() { 
    this.render_badges(); 
    }) 
} 

Answer 1

plutôt que de manipuler le DOM, vous devez utiliser v-si sur l'élément lui-même qui l'allume ou l'éteint en fonction des données. C'est une façon de penser différente de la manipulation directe du DOM apprise dans les jours jQuery. Lire la suite dans la documentation docs sur conditional rendering.

Si vous êtes désireux de déclencher une fois que le DOM est disponible, l'utilisation monté()