Skip to main content Skip to footer

Only Send Updated Value from Gauge Once in Vue

Background:

When a user drags a gauge control, the control’s value gets updated for each tick that gets moved. Sometimes, you may only want to send an update to your back end when the user finishes dragging the gauge control. We can do that by tying a couple of events to the gauge control when it is initialized.

Steps to Complete:

1. Assign a method to the initialized event

2. Inside of the initialized method, tie methods to the mouseup and mouseleave events that will be used to update the back end

Getting Started

Assign a method to the initialized event

If we want to update the back end, we’re going to need to tie some events to the control so that we can tell how a user is interacting with it. We’ll do this inside of the initialized event of the gauge control.

<wj-linear-gauge :initialized="initGauge" :min="0" :max="10" :isReadOnly="false"></wj-calendar>

Inside of the initialized method, tie methods to the mouseup and mouseleave events that will be used to update the back end

Next, we’ll need to tie some events to the control so that we know how the user is interacting with it. We use mouseup to determine when the user releases their mouse button so that we know when the user has finished editing, and we use mouseleave because the user is no longer over the gauge control, so mouseup will not be able to register when the user releases the mouse.

initGauge(s, e){
  s.hostElement.addEventListener('mouseup', function(e) {
    console.log('MouseUp');
  });

  s.hostElement.addEventListener('mouseleave', function(e) {
    console.log('MouseLeave');
  });
}

Inside of these events, you’ll be able to send the update to your back end. Now, instead of sending an update to the back end for each tick that the user moves the gauge, you’ll be able to do it once, when they finish editing.

Joel Parks