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

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

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

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>

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

Тут набросал примерный код
<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);

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

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