【Vue.js】配列操作で詰まった話

マナビト

こんにちはマナビトです。
普段はフロントエンドエンジニアとしてNuxt.js/vue.js/TypeScript/Aangularを
メインに開発業務を行なっています。

Vue.jsにおける配列の操作で詰まってしまった為、自身の備忘録もかねて記事として残しておきたいと思います。

詰まったこと

配列にindexを指定して値を格納しようとしたところ、なぜか期待した通りに配列内の要素が反映されることがありませんでした。

かなり簡略化してますが例えば、下記のようなコードです。

<script setup>
import { ref } from 'vue'

let sampleArray = ['Tweetsift API', 'chatGPT', 'TypeScript', 'React'] // 初期値
sampleArray[0] = 'x' // インデックスを指定して要素を追加する。


</script>

<template>
  <div v-for="(v,i) in sampleArray" key="{{i}} + sampleArray">
    <p>配列リスト{{i + 1}}：{{v}}</p> 
　// 表示されるのは'Tweetsift API', 'chatGPT', 'TypeScript', 'React'のまま...
  </div>
</template>

なぜ反映されないのかと数時間格闘していたところ、公式ドキュメントに記載されていました。

Vue は、配列における次の変更は検知できません:

インデックスと一緒にアイテムを直接セットする場合、
例えば vm.items[indexOfItem] = newValue

配列の長さを変更する場合、例えば vm.items.length = newLength

vue公式ドキュメント配列に関して

インデックスと一緒に値を直接入れていく場合はvueは変更を検知しないと.....
変更を検知させる為に、sliceメソッドやpushメソッドを使用する必要がある様です。

<script setup>

let sampleArray = ['Tweetsift API', 'chatGPT', 'TypeScript', 'React']
const indexOfItem = 1
const newValue = 'Next.js'

sampleArray.splice(indexOfItem, 1, newValue)

</script>

<template>
  <div v-for="(v,i) in sampleArray" key="{{i}} + sampleArray">
    <p>配列リスト{{i + 1}}：{{v}}</p>
     //  'Tweetsift API', 'Next.js', 'TypeScript', 'React' が表示される!!
  </div>
  
</template>

■ 参考文献