VueJs: не изменяются реактивные переменные на лету?

Question

[thehighhomie]

Привет ребят! Помогите понять почему когда я присваиваю переменной новое значение, это значение применяется не сразу? Вот песочница Файл App.vue, строки где меняю переменные 118 (this.transformer.defaultAspectRatio = false) и 126 (this.transformer.defaultAspectRatio = true).

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

Я менял переменные в обработчике сверху "onDragPressure" то есть до того как идет скейл и все равно не работает сразу.

PS: я видимо где-то накосячил, потому что раньше работало так, но я видимо просто не понимаю почему такое происходит и по этому не могу найти ошибку .

Answer 1

[Даниил Попов]

Скорее всего, ваша ошибка описана здесь:
Подробно о реактивности

Comments

[thehighhomie]

у меня все переменеые реактивны, я читал эту статью.

[Даниил Попов]

Но вот видите возникает противоречие. Реактивность Шредингера какая-то.

Вы пробовали $nextTick() ?

[thehighhomie]

Даниил Попов, да. я по всякому пробовал. посмотрите эту песочницу строка 123. а на следующей строке console.log который показывается, что переменная сразу получает значение, и текст который должен по умолчанию увеличиваться, после присваивания в 123 строке не увеличивается. все работает и без $nextTick и вообще без ничего....

[thehighhomie]

thehighhomie, в общем я столько песочниц создал и запутался в них. в общем я привел код в такое состояние https://codesandbox.io/s/p7mzl30rnm

теперь переменные сразу меняются, но изменения происходят только когда второй раз на кнопку нажмешь

дело в том, что я еще назначал переменные только при нажатии кнопки а не при апдейте, там тоже не работало(

[Даниил Попов]

thehighhomie, простите, не там много свобоного времени чтобы ворошить проект.
Вот что увидел: при первом движении левого и правого полузнка высота отправляется неизмененной(как и должно быть). но css свойство transform: matrix() элемента изменяется неверно. Ищите в где формируется матрица и смотрите, что там происходит. Ошибка, скорее всего, не в том участке, на который вы указываете

[thehighhomie]

Даниил Попов,

при первом движении левого и правого полузнка высота отправляется неизмененной

потому, что переменные выставленые в true

[Даниил Попов]

thehighhomie, вы это еще в вопросе написали.
Вот у вас есть цепочка от вызова функции с установкой значения до функции формирующую матрицу. Ну и пройдитесь по этой цепочке, посмотрите, в каком месте теряется значение. А потом сделайте это еще раз, когда все удивительным образом начинает работать.
Вы же заметили, что значение фиксируется при нажатии( видимо по mousedown ), а отправляете вы его каждый раз при движении ( видимо mousemove ). Так и гляньте, на них. Вы очень сильно зациклились на одном месте. Мой вам совет, сделайте перекур.

[thehighhomie]

Даниил Попов, согласен)

Answer 2

[0xD34F]

Если я правильно понял, должно быть так (в смысле - наблюдаемое поведение, а не код - тут уж вы сами думайте, как правильно надо). Реактивность тут не при чём, проблема в том, что вы сначала используете значение, а потом его меняете, предполагая при этом, что использовано будет изменённое значение.

Comments

[thehighhomie]

спасибо! а что, используется не измененное значение? я думал обновил переменную, она соответственно в компоненте обновилась сразу и ресайз уже по новому значению идет. вот этот момент я как раз таки не догоню, вы в точку попали. если я его усвою то не буду так тупить больше. вы можете чуть подробней описать что происходит, чтобы я понял?

[0xD34F]

thehighhomie, у вас последовательность действий такая:

У вас последовательность действий такая: в компоненте AppTransformer пользователь нажимает на маркер, в обработчике handleScale создаётся обработчик для mousemove, с использованием текущего значения defaultAspectRatio. А установка нового значения defaultAspectRatio осуществляется при mousemove (пользователь дёрнул мышь) - генерируется событие update, и информация о нажатом маркере наконец-то уходит в родительский компонент.

Что сделал я: добавил генерацию ещё одного события при нажатии на маркер, с которым в родительский компонент уходит информация о маркере, а непосредственно обработку нажатия завернул в nextTick, чтобы к моменту создания обработчика mousemove из родительского компонента пришло новое значение defaultAspectRatio.

[thehighhomie]

0xD34F, спасибо! дошло) получается мне теперь в обработчике update (в файле App.vue) можно убрать this.transformer.defaultAspectRatio = false и this.transformer.defaultAspectRatio = false, так как переменные нужно менять до начала перетаскивания, при старте? иначе не обновятся данные. так?

[0xD34F]

thehighhomie, чего там убирать или нет - это вам виднее, решайте сами. Неужели вы и впрямь ждёте, что я буду досконально изучать ваш код? Нет, так не будет.

[thehighhomie]

0xD34F,

Неужели вы и впрямь ждёте, что я буду досконально изучать ваш код? Нет, так не будет.

это понятно. вы просто написали последовательность, соответственно вы должны понимать о чем я пишу, по этому спросил.

тогда в общем спрошу, когда меняется переменная, перед кодом, который использует эту переменную, то год нужно обернуть в nextTick, чтобы он запускался после обновления переменной?

[0xD34F]

thehighhomie,

вы должны понимать о чем я пишу, по этому спросил

Я понимаю. Но для ответа нужно более подробно изучить код. Непосредственного отношения к исходному вопросу это изучение уже не имеет, так что...

когда меняется переменная, перед кодом, который использует эту переменную, то год нужно обернуть в nextTick, чтобы он запускался после обновления переменной?

Да. Нет. Не знаю. Вы сейчас пытаетесь идти путём говнокодера - вместо того, чтобы понять основы хотите получить рецепт действий в каком-то частном случае. Который на самом деле ни разу не частный - возможны варианты. Что если значение обновляется посредством ajax-запроса? Очевидно, nextTick тут не поможет.

[thehighhomie]

0xD34F, ну да, я конкретно в этом случае пытаюсь понять как это работает. у меня часто такие проблемы появляются, я их решал все время в хуке updated, с проверкой на переменную (изменилась или нет) а тут updated не поможет уже.

Вы сейчас пытаетесь идти путём говнокодера - вместо того, чтобы понять основы хотите получить рецепт действий в каком-то частном случае.

я как раз и пытаюсь понять

[0xD34F]

thehighhomie,

я как раз и пытаюсь понять

Читайте документацию.