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

Posted 2023-02-22

【中文标题】用vue element ui区分用户输入和数据变化

【英文标题】：Differentiate between user input and data change with vue element ui

【发布时间】：2020-01-09 23:22:57

【问题描述】：

我正在使用 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

【问题讨论】：

请分享一些代码让图片更清晰

似乎，这在codepen中工作。让我检查一下我的代码。无论如何，我已经更新了有问题的代码。

【参考方案1】：

解决方案 1

@input 事件应该适用于这种情况。细微的差别在于，它会在每次按下按键时触发。

解决方案 2

你可以使用Vue.nextTick

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

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

Vue.nextTick( [callback, context] )

【讨论】：

@input 仅在文本控件中可用。复选框和其他人没有该事件。 :(element.eleme.io/#/en-US/component/checkbox

不知道你有一个复选框，因为你没有提供代码示例。你试过 Vue.nextTick 了吗？

是的，问题中提到的 nextTick 可以是解决方案。只是想发现是否有比拥有标志更好的方法。

【参考方案2】：

更改事件运行良好。

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

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

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