Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

175
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda