Как в компоненте отследить изменение полей для включения кнопок сохранения?

Question

[Андрей Шулепин]

Есть поля date допустим 'name' и ''name_changed'.
На него повешено слежение:

watch:{
  name(val, old){
    this.name_changed = true;
  }
}

и в темплейте есть кнопка сохранения/отправки значения поля у которой :disabled="!name_changed", то есть кнопка изначально должна быть disabled, а после изменения значения пользователем должна "раздисейбливаться"
Поле name заполняется по axios запросу (в методе mounted).

Так вот, проблема в том, что видимо когда по первому запросу поле name заполняется, соответственно поле name_changed становится равно true и кнопка сохранения получается изначально доступна.
Как вариант я должен где то проверить при изменении name что это пользователь изменил а не программная инициация.
Конечно можно повесить слушатель на input и навесить своей логики , но она вылезет вся в template, а это как то не красиво. А в рабочем коде отслеживаемых полей много и будет каша в template
Хотелось бы провернуть все максимально в JS.
Кто то может делал подобное элегантно.
Примерный код набросал в комментарии ниже

Comments

[Андрей Шулепин]

Тут набросал примерный код

<template>
    <div>
        <input type="text" v-model="name">
        <button :disabled="!name_changed">Сохранить</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            name:undefined,
            name_changed:undefined
        }
    },
    watch:{
        name(val, old){
            this.name_changed = true;
        }
    },
    mounted(){
        axios.get('any')
        .then(resp=>{
            this.name = resp.data.name;
            this.name_changed = false;
        })
    }
}
</script>

Answer 1

[0xD34F]

проблема в том, что видимо когда по первому запросу поле name заполняется, соответственно поле name_changed становится равно true и кнопка сохранения получается изначально доступна

Можно запускать слежение после получения данных. Вырезаете

watch:{
  name(val, old){
    this.name_changed = true;
  }
}

А в коллбек запроса, после установки значения name, добавляете:

this.$watch('name', () => this.name_changed = true);

Comments

[Андрей Шулепин]

Спасибо за ответ. Он немного помог, и в принципе по предоставленному коду ответил.
Но в рабочем коде запрос выполняется несколько раз причем по вызову пользователя и там уже не срабатывает.

[Андрей Шулепин]

Вот более приближенный результат. И он к сожалению не работает

<template>
    <div>
        <input type="text" v-model="name">
        <button :disabled="!name_changed">Сохранить</button>
        <button :disabled="!name_changed" @click="get">Отмена</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            name:undefined,
            name_changed:undefined
        }
    },
    mounted(){
        this.get();
    },
    methods:{
        get(){
            axios.get('any')
                    .then(resp=>{
                        this.name = resp.data.name;
                        this.name_changed = false;
                        this.$watch('name', () => this.name_changed = true);
                    })
        }
    }
}
</script>

И я честно говоря, не знаю можно ли вот так навешивать слежение несколько раз, не уверен в ожидаемом поведении "следителя"

[0xD34F]

Что значит "не срабатывает"? Кнопка не отключается после повторного запроса данных? Какие могу предложить варианты:

1. Отключайте наблюдение на время запроса.
2. Ваш пример из комментария к вопросу - чтобы сброс переменной, отвечающей за активность кнопки, выполнился после вотчера, оберните его в $nextTick.
3. Дублируйте данные и проверяйте, что изменяемые равны копии.
4. Изменения слушать только пользовательские. Да, в вопросе вы упоминали, что не хотите так делать, но причину я не очень понял - почему какая-то логика должна оказаться в шаблоне? Ей место в методе, в шаблоне будет только вызов метода. Ну а то, что полей много - пусть метод принимает параметр, указывающий, кого надо обработать. Примерно так.

[0xD34F]

не знаю можно ли вот так навешивать слежение несколько раз

Можно. Только какой смысл? - будет несколько вотчеров, которые делают одно и то же.

Добавил ссылки на примеры в предыдущем комментарии.

[Андрей Шулепин]

Спасибо, Ваши ответы дали мне варианты реализации задуманного. Как оказалось, моя проблема лежала немного в другом месте.
На некоторых из полей висели компоненты v-autocomplete из vuetify. Они то и изменяли поля после инициализации. Разберусь с ним и опубликую здесь свою реализацию.

Answer 2

[Илья Мясин]

Вотчеры - это обычно признак джейквири-программирования =)
Лучше сохранять оригинальные данные и их сравнивать с текущими. Так и честный changed будет (у вас скорее "touched").

Вот набросал примерно:

const api = {
  async getData() {
    return {name: 'Foo', email: '[e-mail]'};
  }
}

new Vue({
  el:'#app',
  template: `<div v-if="current">
    <input v-model="current.name" />
    <input v-model="current.email" />
    <button :disabled="!isChanged">submit</button>
  </div>`,
  data() {
    return {
      original: null,
      current: null,
    }
  },
  async created() {
    const data = await api.getData();
    this.original = JSON.stringify(data);
    this.current = data;
  },
  computed: {
    isChanged() {
      return JSON.stringify(this.current) !== this.original;
    }
  }
});

https://codepen.io/dubrowsky/pen/BvdKZE?editors=1010

UPD: Если нужен не changed, а touched - сделайте

<input type="text" v-model="name" @input="name_changed = true">

и будет счастие

Comments

[Андрей Шулепин]

Да такой подход мне попадался при поиске в гугле.
Но что то там писало по поводу очередности полей в сравниваемых json-строках, что типа может не сработать сравнение. Типа {name:'AAA', age:5} !== {age:5, name:'AAA'}. Проверять я к сожалению не стал.
Там же предлагалась функция честного сравнения объектов с рекурсией по филдам, но я надеялся обойтись простыми решениями. Кстати json сравнения не хотел бы использовать т к у меня есть поля и по 1000 символов , а полей немало (5-10-20) не знаю как скажется на скорости.
По поводу wotch-еров и JQuery : не знаю насколько привязан автор Vue к JQuery, я так не особо его знаю, а вотчеры (да и другие "инструменты") использую по необходимости. Читал в документации, что вотчеры по возможности лучше заменять на computed свойства. Но вот без сравнения старых данных с новыми ничего лучше не придумал

[Илья Мясин]

Накодить сравнение двух объектов любым способом, включая рекурсивный, заняло бы меньше времени, чем вы потратили на этот коммент =)
Возьмите лодашь: https://lodash.com/docs/4.17.11#isEqual =)

[Андрей Шулепин]

Спасибо. Ваши ответы помогли найти решение.