TNTSuperMan
@TNTSuperMan (TNTSuperMan)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

配列の指定部分を削除できない

解決したいこと

指定の配列を削除したいのですが、うまくいきません。

発生している問題・エラー

splice関数(datas.value.splice(idx,1))を使った

配列の最後尾が消されてしまいました。

delete(delete datas.value[idx])を使った

TypeError: Cannot read properties of undefined (reading 'data')

filter関数を使った

参考

let ret = datas.value.filter(data => 
    data != datas[idx]
)
datas.value = ret;

削除できませんでした。

該当するソースコード

Githubにあります。

src/docs/docs.vueの51行目~のremove関数が配列削除関数です。

自分で試したこと

  • delete予約語を使ったが、失敗した(上)
  • filter関数を使ったが、消せなかった(上)
0

5Answer

splice メソッドを2引数で呼び出したときの仕様を見れば分かることですが、第1引数(インデックス)に負の値を与えると、配列の末尾から数えて第2引数で指定した個数分の要素を削除します。

つまり、質問のコードでは idx-1 だったことになります。 idx をセットするコードが正しく動くかを確認してください。

なお、このような場合は闇雲に filter や delete を試すのではなく(どちらも idx が負のせいで失敗しています)、 splice についてのドキュメントを読んだり console.log(idx) で値を確認したりするのを優先すべきです。

1Like

Array.values()はありますが、Array.value()はないでしょう?
To be single or to be muti, that is the question.

0Like

実現したい動きは「配列のn番目の要素を除いた新しい配列を作る」であっているでしょうか。そうであればfilterが適当ですが、配列datasの中身がObjectのため全要素の比較結果がfalseとなっているのではないかと思います。
currentIdx.valueをfilter関数の第2引数と比較してはどうでしょうか。

let idx = currentIdx.value;
let ret = datas.value.filter((data, index) => idx != index)

0Like

ここで言う datas は 前行の通り Ref<T[]> であるので .value をつけ忘れているだけでは?

 let ret = datas.value.filter(data => 
-  data != datas[idx]
+  data != datas.value[idx]
 )

playground

0Like

Comments

  1. @TNTSuperMan

    Questioner

    そこは凡ミスでしたね。すみません。

すみません、原因が分かりました。
Vueのコンポーネントを更新出来ていませんでした
Vueの開発者ツールなどでよく確認するとちゃんと削除出来ていました。すみません。

0Like

Your answer might help someone💌