fix(frontend): MkSwitch自身でチェック状態を持つように#17333
Conversation
dosubot
Bot
added
the
size:S
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #17333 +/- ##
===========================================
- Coverage 24.89% 14.92% -9.98%
===========================================
Files 1150 242 -908
Lines 38825 11869 -26956
Branches 10774 4019 -6755
===========================================
- Hits 9667 1771 -7896
+ Misses 23393 7934 -15459
+ Partials 5765 2164 -3601 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Switchが押されても親で実際に値を更新しなければ表示は変わらないという前提で使っている箇所は他の方法で実現するように改修する必要はある |
|
|
||
| <script lang="ts" setup> | ||
| import { toRefs } from 'vue'; | ||
| import { ref, toRefs, watch } from 'vue'; |
There was a problem hiding this comment.
toRefs is imported but no longer used in this component. This will typically trip lint/TS unused-import checks; please remove it (or use it) to keep the file clean and the build green.
| import { ref, toRefs, watch } from 'vue'; | |
| import { ref, watch } from 'vue'; |
| const checked = ref(props.modelValue); | ||
|
|
||
| watch(() => props.modelValue, v => { | ||
| checked.value = v; | ||
| }); | ||
|
|
||
| const toggle = () => { | ||
| if (props.disabled) return; | ||
| emit('update:modelValue', !checked.value); | ||
| emit('change', !checked.value); | ||
|
|
||
| checked.value = !checked.value; | ||
| emit('update:modelValue', checked.value); | ||
| emit('change', checked.value); |
There was a problem hiding this comment.
modelValue is typed as boolean | Ref<boolean>, but checked is initialized with ref(props.modelValue) and then negated (!checked.value). If a Ref<boolean> is ever passed (e.g. programmatic render), checked.value becomes an object and !checked.value will always be false, breaking toggling and also defeating the intended reactivity fix. Consider normalizing with unref() (and watching unref(props.modelValue)), or otherwise narrowing modelValue to boolean so checked is always a boolean.
What
MkSwitch自身でチェック状態を持つように
Why
shallowなリアクティビティでmodelValueが渡されている場合、親からtriggerRefしたとしてもMkSwitchに反映されない問題がある
Switch自身でチェック状態を持つようにすることで、オフの状態でクリックしたらオンになり、オンの状態でクリックしたらオフになることが保証される
Additional info (optional)
Checklist