Блог

У меня есть несколько форм, созданных из API. Для каждой формы мне нужно проверить, изменено ли значение входных данных или нет; чтобы я мог отключить или включить кнопку.

Итак, я попытался создать флаг: isChanged: false , чтобы я мог сделать кнопку такой:

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

Но, поскольку у меня несколько форм, мне, возможно, нужно создать несколько флагов, но я не понимаю, как динамически создавать несколько флагов для каждой формы.

Кроме того, у меня есть Save All кнопка, для которой может потребоваться новый флаг, например, isChangedAny: false чтобы определить, изменилась ли какая-либо из нескольких форм или нет.

Если какой-либо из входных данных формы изменяется, эта кнопка должна быть включена из отключенной. Но, самое главное, я не могу понять, как создать метод для определения того, изменяются ли входные данные формы или нет. Как я могу это сделать?

Демо-версия CodePen

Вы можете создавать отдельные наблюдатели для каждой формы после получения данных и сохранять идентификатор измененных форм:

   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 массивом. Если в этом массиве есть определенный идентификатор, активируйте форму. Если длина changed массива больше 0, активируйте saveAll .

Вот рабочий codepen

По сути, у вас есть два варианта решения этой проблемы:

1. Вы прослушиваете @input событие в поле формы, как только оно срабатывает, вы устанавливаете hasChanged значение true. Это простое решение, но оно не будет работать, если пользователь изменит значение обратно на исходное, потому что тогда значение hasChanged остается true, а форма все еще сохраняется.
2. Создайте копию исходных данных формы в mounted() перехватчике и сравните текущий ввод с исходным вводом через computed свойство. Это будет работать лучше всего, но может быть немного сложнее реализовать.