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

Question

我正在使用 vue 元素 UI。

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

到目前为止，元素UI提供了一个事件，即“更改”事件。

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

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

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

这是一个代码笔

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

更改事件运行良好。

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

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

了解更多详情。 https://stackoverflow.com/a/46748348/9263418