@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 в методе дает такое поведение? Как это исправить? спасибо
  • Вопрос задан
  • 196 просмотров
Решения вопроса 1
dimovich85
@dimovich85
https://u-academy.net/
Если this.default_filter это объект, то он передается по ссылке, и значит меняя this.filter будет меняться и дефолт фильтр. Скопируйте объект вот так: https://developer.mozilla.org/ru/docs/Web/JavaScri...
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@jazzus Автор вопроса
Решение от Dima Polos в комментариях
this.filter = Object.assign({}, this.default_filter);
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы