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, Sep 07 '19 at 11:15

score 1 · Answer 1 · edited Jul 16 '22 at 00:33

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 '22 at 00:33

tony19

125,647
18
229
307

answered Sep 07 '19 at 11:01

Tom Marienfeld

716
3
14

@input is only available in text controls. checkbox and others don't have that event. :( https://element.eleme.io/#/en-US/component/checkbox – Anonymous Creator Sep 07 '19 at 11:09
1

Did not know you have a checkbox, since you did not provie code examples. Did you try Vue.nextTick? – Tom Marienfeld Sep 07 '19 at 11:15
ya, that nextTick as mentioned in question can be solution. just wanted to discover if there is better way than having flag. – Anonymous Creator Sep 07 '19 at 11:17

Anonymous Creator · Accepted Answer · 2019-09-07T12:01:24.670

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 07 '19 at 12:01

answered Sep 07 '19 at 11:43

Anonymous Creator

2,968
7
31
77

Differentiate between user input and data change with vue element ui

2 Answers2

Solution 1

Solution 2