Differentiate between user input and data change with vue element ui

Question

I am using vue element UI.

and on user input change I want to save data (something like autosave).

So far there is one event provided by element UI, that is "change" event.

But that is also calling when I assign value from backend, in that case data are already saved.

So how to detect whether value has come from user or from our binding (I know I can take flag in this case if there is no other better solution)?

<div id="app">
<template>
  <!-- `checked` should be true or false -->
  <el-checkbox v-model="checked" @change="changed">Option</el-checkbox>
</template>

var Main = {
    data() {
      return {
        checked: true
      };
    },methods: {
      changed(val) {
        alert('This should only change when user inputs, not when data is updated from code');

        setTimeout(function(){
          //Here alert should not appear as this is not manual input.
          this.checked = !this.checked;
        },5000);


      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Here is a codepen

https://codepen.io/hnviradiya/pen/zYORGRR

seems, this is working in codepen. let me check on my code. I have updated code in question anyway. — Anonymous Creator
– Anonymous Creator, Commented Sep 7, 2019 at 11:15

Anonymous Creator · Accepted Answer · 2019-09-07 12:01:24Z

1

Change event was working perfectly fine.

My mistake was (in code I had written, got answer when I wrote code for question which I took from element ui webpage when asked by @Boussadjra Brahim in comment) that I had bind it using (:) instead of (@).

So it was expecting @change and I had provided :change.

For more details. https://stackoverflow.com/a/46748348/9263418

edited Sep 7, 2019 at 12:01

answered Sep 7, 2019 at 11:43

Anonymous Creator

3,8979 gold badges39 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 00:33:00Z

1

Solution 1

The @input event should work well for that case. Small diference is, that it triggeres at each key down.

Solution 2

You could use Vue.nextTick

Before setting the value from backend in code, you could set a flag this.isSettingValue = true. Then you set the value and call Vue.nextTick(() => { this.isSettingValue = false });

Now you can avoid autosaving by checking this.isSettingValue == true. Using Vue.nextTick ensures that the flag isn't set back to false until after the asynchronous data update completes.

Vue.nextTick( [callback, context] )

edited Jul 16, 2022 at 0:33

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 7, 2019 at 11:01

Tom Marienfeld

7143 silver badges14 bronze badges

3 Comments

Anonymous Creator Over a year ago

@input is only available in text controls. checkbox and others don't have that event. :( element.eleme.io/#/en-US/component/checkbox

Tom Marienfeld Over a year ago

Did not know you have a checkbox, since you did not provie code examples. Did you try Vue.nextTick?

Anonymous Creator Over a year ago

ya, that nextTick as mentioned in question can be solution. just wanted to discover if there is better way than having flag.

Collectives™ on Stack Overflow

Differentiate between user input and data change with vue element ui

2 Answers 2

Comments

Solution 1

Solution 2

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Solution 1

Solution 2

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related