【Vue.js】配列の特定のインデックスの値を書き換える
Vueでリアクティブにならない時
VueのdataやVuexでは以下のようなインデックス数値を使った配列要素の更新を検知してくれない。
let list = [
{ name: 'hoge' },
{ name: 'fuga' }
]
list[0] = { name: 'hogehoge' }
解決方法① Vue.setを使う
グローバルAPIのsetメソッドを使うと配列を更新することが出来る。
let list = [
{ name: 'hoge' },
{ name: 'fuga' }
]
// Vue.set(更新する配列, 配列のインデックス, 新しいデータ)
Vue.set(list, 0, { name: 'hogehoge' })
解決方法② spliceを使う
let list = [
{ name: 'hoge' },
{ name: 'fuga' }
]
list.splice(0, 1, { name: 'hogehoge' })
let list = [
{ name: 'hoge' },
{ name: 'fuga' }
]
list.splice(0, 1, { name: 'hogehoge' })
spliceはの第一引数は配列のインデックス、第二引数はインデックスから数えて何個要素を取り除くのかを指定、第三引数で挿入する値を指定する。
上記の例では、listの1番目の要素から1つを取り除き、{ name: 'hogehoge' }を挿入している。
spliceを使えば追加、削除、挿入全てができるのでspliceを使うのが良さげ。
Author And Source
この問題について(【Vue.js】配列の特定のインデックスの値を書き換える), 我々は、より多くの情報をここで見つけました https://qiita.com/miyarappo/items/a84cb6069de7ce013a1f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .