用vue元素区分用户输入和数据变化ui

Question

我正在使用 vue 元素 UI。

并且在用户输入更改时我想保存数据（类似于自动保存）。

到目前为止，元素 UI 提供了一个事件，即 "change" 事件。

但是当我从后端赋值时这也是调用，在那种情况下数据已经保存。

那么如何检测值是来自用户还是来自我们的绑定（我知道如果没有其他更好的解决方案，我可以在这种情况下取标志）？

<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')

这是一个codepen

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

Answer 1

解决方案 1

@input 事件应该适用于这种情况。不同之处在于，它会在每次按下时触发。

解决方案 2

你可以使用 Vue.nextTick

在代码中从后端设置值之前，您可以设置一个标志 this.isSettingValue = true。然后设置值并调用 Vue.nextTick(() => { this.isSettingValue = false });

现在您可以通过勾选 this.isSettingValue == true 来避免自动保存。使用 Vue.nextTick 可确保在异步数据更新完成之前不会将标志设置回 false。

Vue.nextTick( [callback, context] )

Answer 2

更改事件运行良好。

我的错误是（在我编写的代码中，当我为我从元素 ui 网页中获取的问题编写代码时得到了答案，当@Boussadjra Brahim 在评论中询问时）我使用（ :) 而不是 (@).

所以它期待 @change 而我提供了 :change。

了解更多详情。

用vue元素区分用户输入和数据变化ui

Differentiate between user input and data change with vue element ui

javascript

vue.js

vue-component

vuejs2

element-ui

解决方案 1

解决方案 2