Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

172
Views
VueJS sincroniza dos campos de entrada

Estoy tratando de implementar tal algo usando vueJS:

  1. Tenemos dos campos de entrada, por ejemplo, traducimos de un idioma a otro. Estos dos campos pertenecen a los dos componentes que están hechos para una integración más fácil;
  2. Estos dos componentes son del mismo tipo y están en el componente principal "host";
  3. Cada vez que escribimos algo dentro de un componente, el componente principal lo captura de inmediato y luego lo traduce usando algún algoritmo para valorar otro componente. Luego, el padre debe poner ese valor en el campo del segundo hijo;
  4. La comunicación debe ser de dos maneras en ambos componentes secundarios con su padre. Terminé con este algoritmo, pero creo que lo estoy haciendo mal. Recibo una advertencia de que muté el accesorio, lo cual es una mala idea. Si conoce la mejor manera de hacer tal algoritmo, por favor, aconséjelo. Aquí está mi implementación:
  5. Parent tiene dos valores: para la primera entrada y para la segunda. Están vinculados a los accesorios de los niños usando el modificador .sync. Así: :value.sync="firstValue" y :value.sync="secondValue" ;
  6. Dentro de los niños tenemos un valor con nombre prop (en el que sincronizamos los datos de nuestros padres). Luego, simplemente vinculamos este accesorio usando v-model: v-model="value" ;
  7. Y después de todo, suba el evento para las actualizaciones de .sync: @keyup="$emit('update:value', value);" ;
  8. En el padre, vincula algunas funciones para el manejo de eventos, eso no importa.

Nuevamente, el algoritmo funciona bien. Pero creo que lo estoy haciendo mal con esas cosas. Muté el valor de prop en cada componente usando v-model, lo cual no es bueno. Pero el modificador .sync no funcionará con el valor; lo he comprobado, solo funciona con accesorios, porque v-bind solo funciona con accesorios, como puedo ver... Por lo tanto, estoy muy contento de escuchar consejos para mejorar. .

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Podría considerar usar una tienda como Vuex en este caso.

  1. Después de que el componente principal hizo la transformación, envió la acción y mutó la propiedad de la tienda global.
  2. En el componente secundario 2, observe los cambios en esta propiedad de la tienda y luego actualice su modelo de entrada
about 4 years ago · Juan Pablo Isaza Report

0

Puede usar v-model con componentes. Documentos

Dicho esto, haría algo como esto: Codepen

 <field v-model="text"></field> <field v-model="processedText"></field>

y luego usar observadores

 watch: { text(text) { this.processedText = this.process(text); }, processedText(text) { this.text = this.process(text); } }

Por supuesto, probablemente haya más de una forma de hacerlo, pero esta parece ser la ruta más corta :)

about 4 years ago · Juan Pablo Isaza Report

0

Gracias a todas las respuestas que ustedes proporcionaron. He aprendido algunos trucos nuevos de estos consejos. ¡Pero me gustaría hacer una aclaración y brindar la mejor opción (en mi opinión)!

Para empezar, mi método :

  1. En el componente secundario: tenga en cuenta que estoy usando VueJs2, por lo que la configuración de CHILD podría ser diferente para usar v-model. Para las entradas dentro de los niños establecemos: @input="$emit('input', $event.target.value)" v-bind:value="value" , donde value es un accesorio definido;
  2. En el componente principal: no necesitamos establecer observadores. El problema de esta decisión (que se proporciona en la respuesta de vch) es que podría ser la raíz de la recursión infinita dentro del componente principal. Así que podríamos simplemente escuchar los eventos de entrada dentro de los componentes secundarios, como este: @input="someValueChanged"> . E incluso podríamos tener un campo de escucha bidireccional dentro del padre, simplemente usando v-model en nuestros componentes personalizados: v-model="some value" .

Las ventajas de mis métodos son claras: tenemos un componente universal para CUALQUIER tipo de entrada. Podemos crear oyentes personalizados escuchando directamente los eventos emitidos. Y podemos poner los modificadores necesarios, como .lazy en esas entradas personalizadas. No hay desventajas tbh, o aún no las he encontrado.

Respuesta de vch : método genial, lo probé, pero parece ser muy recursivo dentro del componente principal. Su codepen funciona, pero en mi caso (VueJS2) parece estar roto. Pero comencé con su método y simplemente eliminé los observadores inútiles y agregué detectores de eventos.

Respuesta de Pavan : De nuevo, método de trabajo. Realmente podríamos usar el almacenamiento para tal caso, pero veo algunas desventajas aquí:

  1. No usamos una extensión lista para usar: VueX, que debe instalarse. Soy fanático de los métodos incorporados tbh;
  2. No podemos proporcionar una lógica separada para cada entrada; tendremos que crear un componente personalizado para cada mecanismo, porque tienen que escuchar diferentes variables de almacenamiento.

¡Gracias a todos! ¡Fue muy útil!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!