Почему меняется значение пропса?

Question

[jazzus]

Задача – передать с бэка значения по умолчанию для объекта в VUE.
Процесс.
Передаю из блейд шаблона Laravel в VUE пропс

<filter-component
:default_filter="{{json_encode($default_filter)}}" 
>
</filter-component>

В компоненте пропс принимает правильные значения

props: [
'default_filter'
],

В дате VUE есть объект Filter. Я хочу передать ему значения из пропса. И делаю так

resetFilter() {
this.filter = this.default_filter;
},

Значения передаются. Но возникает проблема - значения пропса реактивно меняются вместе со значениями из фильтра.
Т.е. например передаю из формы в дату
<input v-model="filter.name" type="text">
а изменяется не только в filter (который в date) но и в default_filter (который props) автоматом. Мне конечно это не нужно т.к. значения по дефолту не должны меняться. Более нигде в компоненте пропс не используется. Только в методе resetFilter(). На сервер также не отправляется. Все происходит в VUE. Почему вариант с this.filter = this.default_filter в методе дает такое поведение? Как это исправить? спасибо

Comments

[Dima Polos]

Если this.default_filter это объект, то он передается по ссылке, и значит меняя this.filter будет меняться и дефолт фильтр. Скопируйте объект вот так: https://developer.mozilla.org/ru/docs/Web/JavaScri...

[jazzus]

Dima Polos, я сделал
Object.assign(this.filter, this.default_filter);
данная проблема исчезла. Но появилось непонятное поведение с devtools - значение в this.filter стало изменяться не реактивно. А по кнопке запуска метода фетча (axios отправляет данные фильтра на бэк и получает результаты). Результаты получает правильные, но почему в Vue Chrome devtools данные перестали реактивно изменяться в date?

[Dima Polos]

Чтобы скопировать надо Object.assign({}, this.default_filter);
Вы как бы говорите, что свяжи пустой новый объект вот с этим, и так создастся новая сущность.

[jazzus]

Dima Polos, спасибо! Все получилось. Хотя плохо понимаю, что происходит)
В итоге сделал

this.filter = Object.assign({}, this.default_filter);

Проблема реактивности исчезла

[Dima Polos]

jazzus, если коротко, то на все поля vue вешает геттеры и сеттеры, которые отслеживают изменения данных и дают знать когда надо что-то перерендерить. Когда Вы скопировали this.default_filter в this.filter там возникли проблемы, так как на оригинальных объектах висели геттеры и сеттеры, после копирования видимо возникли конфликты. Когда Вы создали новый объект, через Object.assign({}, ...) проблемы исчезли, this.filter стал отдельным объектом. Вот когда в самом начале присвоили this.filter = this.default_filter оба поля вели на один и тот же объект, поэтому и менялись оба фильтра сразу, по сути был только один объект, который менялся, а на него вели две ссылки.

[jazzus]

Dima Polos, спасибо за объяснение. Я думал Vue может изменять только объекты в date с использованием v-model. Мне и в голову не приходило, что оказывается он изменяет объект по ссылке.

[Dima Polos]

jazzus, объект по ссылке это фишка js, тут vue не при чем, а вот реактивность у vue за счет геттеров/сеттеров, вот интересный материал: https://www.youtube.com/playlist?list=PLyeqauxei6j...
Также https://ru.vuejs.org/v2/style-guide/index.html - очень классная документация
Кстати, vue 3 уже будет через Proxy работать.

[jazzus]

Dima Polos, в js конечно куча нюансов непонятных. В бэке как написал так и будет. Можно не волноваться. Либо ошибка. Без всяких "не рекомендуется" в доках. Как у vue. У меня половина v-for без ключей и типы пропсов не указаны. Просто забываю т.к. никаких ошибок нет и на автомате лишние действия пропускаешь. Но видимо за кадром или на других браузерах/устройствах есть нюансы и придется рефакторить эти моменты

[Dima Polos]

jazzus, да, js мир чудес))) Я после питона пришел во фронт, и как будто разучился кодить, а еще кроссбраузерность...
Насчет ключей v-for, ОЧЕНЬ важно, добавляйте их обязательно, это увеличивает производительность, они помогают отследить где произошли изменения и менять не все компоненты, а только те, которые нужно.

[jazzus]

Dima Polos, да завтра буду все рефакторить прямо по статье. Я читал ее и планировал делать как нужно) Жалко, что в js сразу не вылетают ошибки. Типа вы не добавили ключ. Тем более если это важно. Лушче 100% ошибка чем что-то непонятное в фоне

[Dima Polos]

jazzus, да, согласен, лучше сразу в лоб. В свое время js как язык никто серьезно и не рассматривал, вот его криво и сделали, а теперь приходится мириться с такой наследственностью)
Успехов!=)

Answer 1

[Dima Polos]

Если this.default_filter это объект, то он передается по ссылке, и значит меняя this.filter будет меняться и дефолт фильтр. Скопируйте объект вот так: https://developer.mozilla.org/ru/docs/Web/JavaScri...

Answer 2

[jazzus]

Решение от Dima Polos в комментариях

this.filter = Object.assign({}, this.default_filter);

Comments

[Dima Polos]

Рад, что помог! Отметьте решением тогда, я скопировал вниз ответ.