Saltar al contenido

El enlace de Vuejs no funciona si se actualiza con jquery

Hola usuario de nuestro sitio web, descubrimos la solución a lo que estabas buscando, deslízate y la obtendrás a continuación.

Solución:

es demasiado tarde para responder, pero cualquiera que se tope con esto en el futuro puede usar mi sugerencia para trabajar con .

había leído en alguna parte que This is a jQuery problem, trigger/val() doesn't dispatch native events in some cases.
Entonces enviaremos el evento JS nativo después de cambiar los valores con jQuery val()

$("#test").val("testing")[0].dispatchEvent(new Event('input'))

Puntos a tener en cuenta: –

  • en vue, text y textarea uso de elementos input evento y checkboxes, radio y select usos change como un evento Así que dispatchEvent en consecuencia;
  • supongo que usando el selector de identificación $("#test") estás aplicando esto a un elemento dom único por eso he elegido [0] th elemento. si tiene la intención de incluir varios elementos, puede usar for loop para dispatchEvent on al.

referencia: – Problemas de Vue en Github

La mejor manera es dejar que jQuery cambie los datos en lugar del valor de entrada para mantener todo sincronizado.

Me gusta esto:

let mainState =  inputVal: 'testing' ;

let app = new Vue(
  el: '#app',
  data: mainState,
  methods: 
    vueThing() 
      this.inputVal = 'Vue value';
    
  
); 

$('#jqThing').on('click', function() 
  mainState.inputVal = 'jQuery Value';
);

https://jsfiddle.net/6evc921f/

O envuelva los constructores de elementos jQuery en componentes Vue y simplemente utilícelos en páginas mejoradas Vue

solo usa el evento @change:


También podrías usar el .lazy modificador:


como se indica en los documentos: By default, v-model syncs the input with the data after each input event (with the exception of IME composition as stated above). You can add the lazy modifier to instead sync after change events.

Comentarios y puntuaciones de la guía

Nos encantaría que puedieras dar difusión a esta división si si solucionó tu problema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *