Vue で v-for を更新する方法

ヒント:

配列変更メソッドによりv-forが更新され、ページが更新されます。
配列を変更しないメソッド: v-for を更新しない新しい配列を返します。更新された値を検出できない場合は、overwrite または this.$set() を使用できます。

配列の変更方法は次のとおりです。

1. arr.push()は後ろから要素を追加します

arr.push(5) について

2. arr.pop()は後ろの要素を1つだけ削除します

arr.pop()

3. arr.shift() は先頭の要素を削除します。削除できるのは 1 つだけです。

arr.shift() 関数

4. arr.unshift() は先頭から要素を追加し、追加後の配列の長さを返します。

arr.unshift(8) の並び替え

5. arr.splice(i,n)はi(インデックス値)からN(削除数)を削除します。

arr = [1,2,3,4,5]とする
console.log(arr.splice(2,2)) //[3,4]
console.log(arr) // [1,2,5]

6. arr.sort()は配列をソートし、ソートされた配列を返します。

arr = [2,10,6,1,4,22,3]とする
console.log(arr.sort()) // [1, 10, 2, 22, 3, 4, 6]
arr1 = arr.sort((a, b) => a - b) とします。  
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
arr2 = arr.sort((a, b) => b a) とします。  
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]

7. arr.reverse() は配列を反転する

arr = [1,2,3,4,5]とする
console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]

配列を変更しないメソッドは次のとおりです。

1. arr.concat()は2つの配列を結合する

arr = [1,2,3,4,5]とする
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]

2. arr.slice(start,end) は、開始インデックスを除いて、開始から終了までのインデックスを切り取ります。

arr = [1,2,3,4,5]とする
console.log(arr.slice(1,3)) // [2,3]

オーバーライドメソッド

<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">最初の 3 つをスライスします</button>
   
    スライスボタン(){
   // 2. 配列スライスメソッドは v-for を更新しません // スライスは元の配列を変更しません // this.arr.slice(0, 3)

   // v-for 更新を解決 - 元の配列を上書きします let newArr = this.arr.slice(0, 3)
   this.arr = 新しいArr
 },

this.$set() メソッド

<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">インデックス 0 の値を更新します</button>
   
   スライスボタン(){
   // 値を更新すると、v-for はそれを検出できません // this.arr[0] = 1000
   
   // 解決策 - this.$set()
   // パラメータ 1: ターゲット構造を更新 // パラメータ 2: 位置を更新 // パラメータ 3: 値を更新 let newArr = this.arr.slice(0, 3)
   this.arr = 新しいArr
 },

Vue の v-for 更新検出に関するこの記事はこれで終わりです。より関連性の高い vue v-for 更新検出コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: