Cómo vincula vue el complemento jQuery después de representar la lista
La forma correcta de vincular complementos de jQuery cuando se procesan listas de Vue.js
Cuando se utiliza v-for para vincular listas, a veces es necesario vincular complementos de jQuery como seleccione2.
Debe encontrar el elemento dom después de que Vue lo genere en función del contenido de la matriz y luego vincular el complemento jQuery en $().xxx.
Anteriormente, el método Vue.nextTick se usaba para realizar una devolución de llamada retrasada para representar el complemento jQuery después de que se actualizara el dom.
Sin embargo, este no es un buen enfoque porque a veces es difícil determinar si una actualización de un elemento dom es una actualización a la que debemos prestar atención.
La forma correcta de representar un complemento de Jquery en una lista es utilizar una directiva personalizada. Las directivas personalizadas proporcionan muchas funciones de enlace que pueden monitorear el ciclo de vinculación exacto de elementos y datos dom.
Funciones de enlace
La función de definición de directiva proporciona varias funciones de enlace (opcional):
Enlace: solo se llama cuando la directiva está vinculada a un elemento por primera vez. time Once, puede usar esta función de enlace para definir una operación de inicialización que se ejecuta una vez al vincularse.
Insertado: Se llama cuando el elemento enlazado se inserta en su elemento principal (se puede llamar si el elemento principal existe, pero no es necesario que exista en el documento).
Actualización: Se llama cuando se actualiza la plantilla donde se encuentra el elemento enlazado, independientemente de si cambia el valor del enlace. Las actualizaciones innecesarias de la plantilla se pueden ignorar comparando los valores de enlace antes y después de la actualización (consulte a continuación para obtener detalles sobre los argumentos de la función de enlace).
Actualización de componente: Se llama cuando la plantilla del elemento enlazado completa un ciclo de actualización.
unbind: se llama solo una vez cuando la directiva no está vinculada al elemento.
A continuación, veamos los parámetros de la función de enlace (incluidos ?el, vinculante, vnode, oldVnode).
Parámetros de la función de enlace
Los parámetros de la función de enlace son los siguientes:
el: el elemento vinculado por la instrucción, que se puede utilizar para manipular directamente el DOM.
enlace: un objeto que contiene las siguientes propiedades:
nombre: el nombre de la directiva, excluyendo el prefijo "v-".
valor: valor: el valor del enlace de instrucción, por ejemplo: ?v-my-directive="1 1", el valor es ?2.
oldValue: el prefijo del enlace de instrucciones Un valor disponible sólo en los ganchos ?update? y ?componentUpdated? Está disponible independientemente de que el valor cambie o no.
Expresión: la forma de cadena del valor vinculante. Por ejemplo, al usar ?v-my-directive="1 1"?, el valor de la expresión es ?"1 1".
arg: el argumento pasado a la directiva. Por ejemplo, cuando se utiliza ?v-my-directive:foo, el valor de arg es ?"foo".
Modificador: Objeto que contiene modificadores. Por ejemplo: ?v-my-directive.foo.bar, el valor de los modificadores del objeto modificador es ?{ foo: true, bar: true }.
vnode: un nodo virtual generado por la compilación de Vue. Para obtener más información, consulte la API de VNode.
oldVnode: El nodo virtual anterior, solo disponible en los ganchos "update" y "componentUpdated".
Ejemplolt;table id="testTable"gt;
lt;tr v-for="(el, lineIndex) en líneas" v--lineinserted="lineIndex" gt ;
lt; tdgt
lt; entrada ?nombre="bindSelect2" ?/gt; lt;/trgt; lt;/tablegt;
función renderLines(el, lineIndex){ //render select2
$("testTable tr").eq(lineIndex). ("input[name='bindSelect2']").select2({...}) ;
}
Vue.directive('line-inserted', {< / p>
?insertado: función (el, enlace) { var lineIndex = enlace.valor
? renderLines(el, lineIndex);
}
}
Vue.directive('line-inserted', {
?
});
p>?