Log.log(work)

いろんな作業メモ

Vue2→3へ移行したらチェックボックスにチェックが付かない

環境

vue3.2.6 (OptionsAPI)

node 18.16.1

内容

Vue2で元気に動いていたチェックボックスがVue3に上げたら動かなくなった。

正確にはチェックボックスをクリックしてもチェックが付かない状態になった。v- modelの中身をconsole.log()で表示しても空っぽのまま。Vue2だとクリックしたチェックボックスvalueが入っていたのになぜ・・・。

チェックボックスは複数あるのでv_modelは配列を指定。

細かい話は省略するが、click時の関数にはクリックしたチェックボックスによって他のチェックボックスの要素を変更するような処理が入っている状態だった。

<input
  type="checkbox"
  id="hoge_1"
  value="hoge_1"
  v-model="checklist"
  @click="clickfunc(hoge_1)"
/>

解決

@clickを@changeにしたら動いた。

前任者がclickで実装していたのでそのままにしていたが、Vue3で動きが変わったのかな・・・?

参考

(追記) Click event is triggered before value is really changed. だって。

stackoverflow.com