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

Question

Андрей Шулепин @LisPNZ

Почти фулстек

Vue.js

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

Есть поля 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.
Кто то может делал подобное элегантно.
Примерный код набросал в комментарии ниже

Вопрос задан более трёх лет назад
1544 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Андрей Шулепин @LisPNZ Автор вопроса

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

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

Написано более трёх лет назад

Решения вопроса 2

5 комментариев

Андрей Шулепин @LisPNZ Автор вопроса

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

Написано более трёх лет назад

Андрей Шулепин @LisPNZ Автор вопроса

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

<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 @0xD34F Куратор тега Vue.js

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

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

Написано более трёх лет назад
0xD34F @0xD34F Куратор тега Vue.js

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

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

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

Написано более трёх лет назад
Андрей Шулепин @LisPNZ Автор вопроса

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

Написано более трёх лет назад

3 комментария

Андрей Шулепин @LisPNZ Автор вопроса

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

Написано более трёх лет назад
Илья Мясин @dubr

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

Написано более трёх лет назад
Андрей Шулепин @LisPNZ Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Node.js

+3 ещё

Средний
Как решить ошибку Nuxt 3: does not provide an export named execa?
- 1 подписчик
- 4 часа назад
- 18 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- 6 часов назад
- 72 просмотра
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 21 час назад
- 42 просмотра
0

ответов
Vue.js

Простой
Из-за чего может добавлять слеш в url?
- 1 подписчик
- 23 апр.
- 51 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 71 просмотр
1

ответ
Vue.js

Средний
Какие существуют способы отреагировать на удаление элемента из массива, который передается как пропс в другие компоненты?
- 1 подписчик
- 22 апр.
- 41 просмотр
1

ответ
Vue.js

Простой
Как получить событие клика в updated()?
- 1 подписчик
- 19 апр.
- 44 просмотра
1

ответ
Vue.js

+1 ещё

Средний
Как использовать хуки NUXT в модулях?
- 1 подписчик
- 19 апр.
- 60 просмотров
1

ответ
Vue.js

Простой
Как решить проблему с логикой валидации после перезагрузки страницы в Vue.js?
- 1 подписчик
- 19 апр.
- 51 просмотр
1

ответ
Vue.js

Средний
Как сделать светлую тему по дефолту во Vueform?
- 1 подписчик
- 18 апр.
- 64 просмотра
2

ответа
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Frontend developer (middle/senior)

//stablecode

от 210 000 ₽

Senior Frontend VueJS (частичная занятость)

Онград+

от 125 000 ₽

Обучение моделированию процесса дуговой наплавки в CAE

25 апр. 2024, в 18:14

1500 руб./в час

Реализовать форму регистрации и авторизации на React

25 апр. 2024, в 18:13

1000 руб./за проект

Настроить и запустить email кампанию на Gmail

25 апр. 2024, в 17:54

30000 руб./за проект

Тут набросал примерный код
<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 · 2018-12-27 03:21:58

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

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

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

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

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

Answer 2 · 2018-12-27 03:40:57

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

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

const api = {
  async getData() {
    return {name: 'Foo', email: 'foo@bar.com'};
  }
}

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">

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт