web-dev-qa-db-fra.com

Vue.js un événement se déclenche-t-il après le rendu du composant?

J'ai des composants personnalisés dans Vue.js. Dans l’un des composants que j’ai, il y a une liste de sélection que je souhaite afficher sous la forme d’une boîte de sélection Choisie . J'utilise cela avec une fonction jQuery $("select").chosen().

<template v-for="upload in uploads">
    <new-upload-container :index="$index" :upload="upload" v-if="isNewUpload"></new-upload-container>
    <existing-upload-container :index="$index" :upload="upload" v-if="isExistingUpload"></existing-upload-container>
</template>

Après avoir ajouté des données au tableau lié uploads de l'instance de Vue, la vue est mise à jour avec une instance du composant. Malheureusement, lorsque j'essaie d'instancier Chosen sur le champ sélectionné, cela ne fonctionne pas. 

Je ne sais pas si cela prend peu de temps après avoir ajouté un élément au tableau lié uploads que le DOM met à jour.

<template id="existing-upload-container">

      <select name="beats[@{{ index }}][existing_beat]" class="existing-beats">
           <option selected="selected" value="">-- Select a linked beat --</option>
                  @foreach ($beats as $beat)
                   <option value="{{$beat->id}}">{{$beat->name}}</option>
                  @endforeach
       </select>

    </template>

Un événement est-il déclenché après le rendu complet d'un composant?

javascriptvue.js
19
Wasim

Vous pouvez essayer deux choses dans votre composant, en fonction de celui qui fonctionne avec votre paquet. Dans l'objet Vue:

{
    ready:function(){
        // code here executes once the component is rendered
        // use this in the child component
    },
    watch: {
        uploads:function(){
            //code here executes whenever the uploads array changes 
            //and runs AFTER the dom is updated, could use this in
            //the parent component
        }
    }
}
9
Jeff

La bonne façon serait une directive personnalisée :

<select v-chosen name="beats[@{{ index }}][existing_beat]" class="existing-beats">

//insert/require() the following before the creation of your main Vue instance
Vue.directive("chosen",{
  bind: function(){
    $(this.el).chosen();
  }
})

edit: la syntaxe de la directive a été modifiée dans Vue 2. *:

Vue.directive("chosen",{
  bind: function(el){
    $(el).chosen();
  }
})
10
Linus Borg

utilisez le rappel mounted et vérifiez le statut des données dans votre code.

1
uniEagle

Un bon moyen de le faire est d’envelopper le plugin Chosen dans un composant Vue, comme décrit en détail ici .

0
yvoloshin