データ管理用サイト4

draggableでなぜかキーが重複するエラーがあってその修正をしていた。
原因はVue（Proxy）のリアクティブが解除されておらず、以前に配列に追加した要素まで連動して上書きされてしまっていたことだった。
そこでオブジェクトのディープコピー（参照渡しを含まないコピー）が必要になったんだけど、Vueの場合は手順を2つ踏む必要があった。
1つ目は、toRow()でVueのProxyを解除すること。
2つ目は、2022年にモダンブラウザへの実装が完了した「structuredClone()」でオブジェクトを複製すること。
2つ目は「JSON.parse(JSON.stringify(  ))」で代用ができるが、こちらは完全な複製はできず、関数が削除されてしまうらしい。
原因にたどり着くまでに結構かかってしまい気持ちが折れかけた。

その他、drag判定が広すぎてスクロールがしにくいのを直したり、textareaに謎の線が表示されるのを直したりした。
謎の線はborderプロパティを再定義したら消えた。

とはいえテストって大事だよね、徹夜だったとはいえ怠るべきではなかった。