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

170
Views
VueJS: determine la fuente que activa la devolución de llamada del reloj

Observo una propiedad de un objeto device.flow . Cuando la propiedad cambia, se activa la devolución de llamada. Todo eso funciona y está bien.

Sin embargo, solo quiero que la devolución de llamada se active si el usuario realmente manipula el componente de formulario que usa esa propiedad observada como modelo.

También hay una llamada API periódica para obtener los datos actuales del dispositivo, ya que pueden cambiar debido a otras circunstancias además de la entrada del usuario. El control deslizante también debería ajustarse en consecuencia, pero el evento de socket web no debería emitirse porque no es necesario.

Para ilustrar lo que quiero lograr, adjunté un componente simple a continuación y agregué un comentario, donde quiero distinguir la fuente del cambio de propiedad.

¿Es esto posible?

 <script setup lang="ts"> import type DeviceAirValve from "../../../model/DeviceAirValve"; import {reactive, ref, watch} from "vue"; import {useSocketIO} from "../../../plugins/vueSocketIOClient.js"; import type {Socket} from "socket.io-client"; interface Props { device: DeviceAirValve } const props = defineProps<Props>(); const io = useSocketIO() as Socket; let device = reactive<DeviceAirValve>(props.device); watch( () => device.flow, flow => { // Determine whether the callback gets called because // the value was changed by the user through the v-slider component, // or if the device.flow property has been updated by something else // (for example a periodic poll from an API) -> isFormInput variable if (isFormInput) { flowChangeHandler(flow) } } ); const flowChangeHandler = (newFlow: number): void => { io.emit('deviceUpdate', { deviceId: props.device.deviceId, data: {flow: newFlow} }); }; </script> <template> <v-slider v-model="device.flow"></v-slider> </template>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Una solución es reemplazar el observador con un controlador de eventos para el evento update:modelValue de v-slider (el evento que impulsa v-model , que solo se activa con la entrada del usuario):

 <v-slider @update:modelValue="flowChangeHandler" />

manifestación

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!