javascript - tutorial - ¿Vue.js genera un evento después de que el componente se haya procesado?

vue.js tutorial español

Question

Tengo algunos componentes personalizados en Vue.js. En uno de los componentes que tengo es una lista de selección que quiero representar como un cuadro de selección Chosen . Lo uso con una función 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>

Después de agregar datos a la matriz vinculada de las uploads en la instancia de Vue, la vista se actualiza con una instancia del componente. Desafortunadamente, cuando trato de crear una instancia de Chosen en el campo de selección, no funciona.

No estoy seguro si toma poco tiempo después de agregar un elemento a la matriz enlazada de uploads que el DOM actualiza realmente.

<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>

¿Hay algún evento que se active después de que un componente se haya procesado completamente?

Answer 1

La forma correcta sería una directiva personalizada :

<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();
  }
})

edición: sintaxis de directiva modificada en Vue 2. *:

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

Answer 2

Puede probar dos cosas en su componente, según cuál funcione con su paquete. En el objeto 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
        }
    }
}

Answer 3

Una buena manera de hacerlo sería envolver el complemento Chosen en un componente Vue, como se describe en detalle here .

Answer 4

use la devolución de llamada mounted y verifique el estado de los datos en su código allí.