0

HTML側で、v-forループ表示してるtestListという配列があります。
初期表示は20件で、ユーザが「次の20件」というボタンを押下時に
testListにデータが20件追加されます。
この場合testListの描画は下記のどちらになるのでしょうか?

  1. 1~40件まで全て再描画
  2. 20~40件までが追加描画される

また、1であった場合どのようにしたら2の挙動にできるか
参考になるようなものをご存知でしたら教えてください。

1 件の回答 1

0

「再描画」というのがどのような意味かによりますが、「DOM elementがいったん削除されて新しいのが挿入される」という意味なら、今の場合されません。

key - Vue.jsを見ると、デフォルト(keyなし)ではin-placeに各elementを更新すると書いてあります。今の場合だと1-20件のelementは、削除・挿入はされません。

また、key属性を指定した場合は、配列が更新されるとkeyを元に並び替え・削除・挿入が発生します。testListにデータが20件追加されるときに、前の20件のkeyが変わらないのであれば、その中では削除・挿入は発生しません。

3
  • ありがとうございます。「再描画」とは1−20のDOMが
    – user16768
    Commented 2017年10月26日 8:42
  • コメントが途中で切れてますよ。
    – sigh
    Commented 2017年10月26日 18:05
  • コメント失礼いたしました。再描画とは1-20件ののDOMが再作成されるかということです。おっしゃる通り追加の21-40件のDOMが追加描画になり、1-20件はそのままでした。ありがとうございました!
    – user16768
    Commented 2017年10月27日 15:49

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。