如果多个表单输入在 Vue.js 中没有更改，如何禁用按钮答案

【问题标题】：How to disable button if multiple form inputs do not change in Vue.js如果多个表单输入在 Vue.js 中没有更改，如何禁用按钮
【发布时间】：2021-12-02 16:31:08
【问题描述】：

我有多个从 API 创建的表单。对于每个表单，我需要检查输入的值是否发生了变化；这样我就可以禁用或启用按钮。

所以，我尝试创建一个标志：isChanged: false，这样，我就可以制作这样的按钮：

<v-btn
  :disabled="!isChanged"
>
  Save
</v-btn>

但是，由于我有多个表单，我可能需要创建多个标志，但我不明白如何为每个表单动态创建多个标志。

另外，我有一个 Save All 按钮，它可能需要一个新标志，例如 isChangedAny: false 来检测多个表单中的任何一个是否更改。

如果任何表单输入发生变化，则需要从禁用状态启用该按钮。但是，最重要的是，我不知道如何创建一种方法来检测表单输入是否发生变化。我该怎么做？

CodePen Demo

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以在获取数据后为每个表单创建单独的观察者，并存储更改表单的 id：

  data: () => ({
    items: [],
    changed: []
  }),
  mounted () {
    this.getData()
    // The following code should be run in a callback when the getData() is asynchronous. 
    this.items.forEach((_, index) => {
      this.$watch(['items', index].join('.'), 
        {
          deep: true, 
          handler: (newVal, oldVal) => {
            this.changed.push(newVal.id)
          }
        }
      );
    });
  }

然后检查changed 数组。如果特定 id 在该数组中，请激活表单。如果changed数组的长度大于0，则激活saveAll。

这是工作的codepen

【讨论】：

【解决方案2】：

对于如何解决这个问题，您基本上有两种选择：

您在表单字段上收听@input 事件，一旦触发您将hasChanged 设置为true。这是一个简单的解决方案，但如果用户将值更改回其原始值，它将不起作用，因为 hasChanged 仍然为 true，并且表单仍然可以保存。
在mounted() 挂钩中创建原始表单数据的副本，并通过computed 属性将当前输入与原始输入进行比较。这样做效果最好，但实施起来可能会有点困难。

【讨论】：