Почему не перещитывается computed property?

Question

[Andrey Suha]

Есть такое вычисляемое свойство

formattedDate() {
            let date = this.date ? this.date : this.value;
            return date ? moment(date).format(this.getFormat) : date;
        }

date это свойство в data, при его изменении formattedDate не перещитываеться хотя само свойство date изменяется

https://codesandbox.io/s/vue-template-mqyo8

когда второй раз выбираешь дату то свойство не перещитывается. Само свойство в components/date-picker/index.vue

UPD если закрыть/открыть календарь (дважды нажать на инпут) то дату опять можно выбрать, но опять только один раз

Comments

[Алексей Ярков]

Сделайте пример в jsfiddle, например, иначе это превращается в гадание

[Andrey Suha]

Алексей Ярков, подправил вопрос

[Артем Кондрацкий]

let date = this.date || this.value;
так более правильно

[Andrey Suha]

Артем Кондрацкий, Короче, да, правильнее вряд ли. Только как это помогает решить вопрос?

Answer 1

[Oleg]

На самом деле, очень странно, что не работает ни при выносе из computed property в метод, ни при использовании this.$set. И forceUpdate не помог.

Единственный вариант, как получилось исправить – это завести реактивный проп formattedDate и туда ложить отформатированную дату в методе setSelectedDate.

Как-то так

Comments

[Andrey Suha]

Спасибо, если не будет варианта лучше отмечу как ответ

[Andrey Suha]

Действительно странно что не работает, думаю проблема в moment.js. Использовал Ваш подход, спасибо за ответ

Answer 2

[Shtucer]

От слова "shit"?

Comments

[Andrey Suha]

???

[Shtucer]

Забей, пытаюсь понять этимологию слова "перещитывается".

[Andrey Suha]

Shtucer, Прости если задел твоего внутреннего гуманитария ;) но все же подобные рассуждения лучше в ответ не писать

Answer 3

[Андрей Ололощенко]

Все очень интересно. Смею предположить что вы в переменной this.date храните объект, тем самым вы возвращаете ссылку! На объект this.date видимо.

Попробуйте написать как нибудь типа let date = this.date ? JSON.parse(JSON.stringify(this.date)) : ...
Если сработает как ожидалось - то у вас ошибка в архитектуре и нужно подумать над ней.

Также computed свойства кешируются, не забывайте об этом.

Comments

[Andrey Suha]

Так то this.date свойство, а не переменная)) Не понял что вы имеете ввиду. Естественно в this.date может храниться объект, а может и null. Ну и конечно я знаю что computed кешируються. А возвращает свойство либо null либо строку, но никак не ссылку но объект

[Андрей Ололощенко]

А у вас изначально date инициализирован в компоненте?
Попробуйте ассайнить значение через this.$set(), может с реактивностью что-то не то у вас?

[Andrey Suha]

veremii, конечно инициализирован