V-forを使用してVue.jsのアイテムを反復処理する方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

序章

フロントエンドアプリケーションの一般的な要件は、アイテムを一覧表示することです。それはやることリストとカードシステムの形をとることができます。 Vue.jsは、組み込みのv-for<コアディレクティブを使用したブラウザーへのアイテムのリストのレンダリングをサポートしています。

この投稿では、v-forをVueアプリケーションでどのように使用できるかを探ります。

前提条件

この投稿は、JavaScriptのループ、配列、およびオブジェクトに関する知識があることを前提としています。 JavaScriptを使い始めた場合は、このシリーズを参照できます。

この調査は、Vue.jsフレームワークのCDN（コンテンツ配信ネットワーク）でホストされているコピーを使用するHTMLファイルに基づいて構築されます。

vfor.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>v-for</title>
  </head>

  <body>

    <div id="app">
      <h1>{{ message }}</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            message: "hello"
          }
        }
      });
    </script>

  </body>
</html>

Vue.jsを使い始めた場合は、この投稿を参照できます。

この時点で、このコードをアップロードしてこのファイルをブラウザで表示すると、"hello"というメッセージが表示されます。

範囲で`v-for`を使用

組み込みのv-forディレクティブを使用すると、アイテムをループできます。

v-forディレクティブの範囲を使用して、指定した回数を繰り返すことができます。

<div>の内容を、リスト項目を15回繰り返す順序付けされていないリストに置き換えてみましょう。

vfor.html

<div id="app">
  <ul>
    <li v-for="item in 15">{{ item }}</li>
  </ul>
</div>

これにより、番号1から15の順序付けられていないリストが作成されます。

`<template>`要素の使用

v-forディレクティブは、アタッチされている要素にのみ適用されます。 v-forディレクティブで複数のアイテムを繰り返す必要がある場合は、要素を<template>要素でラップする必要があります。

<div>の内容を<template>に置き換えましょう。

vfor.html

<div id="app">
  <template v-for="item in 15">
    <span>{{ item }}</span>
    <button>Count</button>
  </template>
</div>

これにより、<span>と<button>の繰り返しのコレクションが作成されます。

オブジェクトでの`v-for`の使用

データモデルからobjectItemsオブジェクトの値をループできます。これは、繰り返す必要のある要素にv-forディレクティブを追加することで実現できます。

data()の行を変更して、objectItemsオブジェクトを返すようにします。

vfor.html

<script>
new Vue({
  el: "#app",
  data() {
    return {
      objectItems: {
        key1: 'item1',
        key2: 'item2',
        key3: 'item3'
      }
    }
  }
});
</script>

<div>の内容を、リスト項目を繰り返す順序付けされていないリストに置き換えてみましょう。

vfor.html

<div id="app">
  <ul>
    <li v-for="item in objectItems">{{ item }}</li>
  </ul>
</div>

外観は次のとおりです。

Output
<div id="app">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

これにより、オブジェクトのプロパティ値を含む順序付けられていないリストが作成されます。

プロパティ値に加えて、Vueでオブジェクトをループするときに2つの追加パラメーターを取得します。つまり、keyとindexの値です。

key値を使用すると、現在のプロパティキーにアクセスできます。

indexは、ループ内の現在のアイテムのインデックスを提供します。これは、ループリスト内のアイテムの位置です。

<div>の内容を、item、key、およびindexのリストアイテムを繰り返す順序付けされていないリストに置き換えましょう。

vfor.html

<div id="app">
  <ul>
    <li v-for="(item, key, index) in objectItems">
      {{ item }} - {{ key }} - {{ index }}
    </li>
  </ul>
</div>

外観は次のとおりです。

Output
<div id="app">
  <ul>
    <li>item1 - key1 - 1</li>
    <li>item2 - key2 - 2</li>
    <li>item3 - key3 - 3</li>
  </ul>
</div>

これにより、item、key、およびindexの順序なしリストが作成されます。

アレイでの`v-for`の使用

データモデルからshoppingItems配列の項目をループできます。これは、繰り返す必要のある要素にv-forディレクティブを追加することで実現できます。

data()の行を変更して、オブジェクトを含むshoppingItems配列を返すようにします。

vfor.html

<script>
new Vue({
  el: "#app",
  data() {
    return {
      objectItems: {
        key1: 'item1',
        key2: 'item2',
        key3: 'item3'
      },
      shoppingItems: [
        { name: 'apple', price: '7' },
        { name: 'orange', price: '12' }
      ]
    }
  }
});
</script>

shoppingItems配列内のオブジェクトをループし、指定されたキーを使用して値にアクセスできます。

<div>の内容を、item.nameとitem.priceのリストアイテムを繰り返す順序付けられていないリストに置き換えましょう。

vfor.html

<div id="app">
  <ul>
    <li v-for="item in shoppingItems">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

外観は次のとおりです。

Output
<div id="app">
  <ul>
    <li>apple - 7</li>
    <li>orange - 12</li>
  </ul>
</div>

これにより、配列の値を含む順序付けられていないリストが作成されます。

`v-bind:key`を使用して要素を追跡する

配列の順序が変更されると、デフォルトでは、VueはDOM要素を更新された位置に移動するのではなく、既存の各要素のデータを変更します。

キーを使用して各要素を追跡するようにVueを設定できます。これにより、値が置き換えられるのではなく、要素が移動します。

この値は、繰り返される各要素に固有である必要があります。

item.nameを使用してキーを割り当てましょう。

vfor.html

<div id="app">
  <ul>
    <li v-for="item in shoppingItems" v-bind:key="item.name">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

現在、Vueには、変更が加えられたときにノードのIDを追跡する方法があります。

変更の管理

箱から出して、v-forは配列ミューテーションメソッドをサポートします。これらは、push、pop、shift、unshift、splice、sort、およびreverseです。。これらの操作のいずれかがアレイで実行されると、v-forディレクティブは新しいデータでビューを更新します。

また、配列を新しい配列に置き換えると、Vueはアイテムを更新するための最も最適化された方法を見つけます。

変更管理の問題

アレイで変更されたときにVueが追跡できない2つのことは次のとおりです。

直接設定項目。

例：

data.shoppingItems[3] = { price: 10, name: 'pineapple' };

これは、Vue.setメソッドを使用して解決できます。このメソッドは、array、index、およびnew valueを受け入れます。

Vue.set(data.shoppingItems, 3, { price: 10, name: 'pineapple' });

また、spliceを使用して、特定のインデックスに値を設定できます。

配列の長さを変更します。

例：

data.shoppingItems.length = 2;

問題を回避するために直接設定する代わりに、spliceを使用して配列の長さを変更できます。

フィルタリングリスト

元のリストを変更せずに、表示されているリストを除外できます。これは、computed値を使用するか、v-for値を設定するときにメソッドを使用して値を渡すことによって実行できます。

`computed`値を使用したアイテムのフィルタリング

リストに直接値を設定する代わりに、computed値をポイントします。その計算された関数でデータを除外するためのロジックを書くことができます。

まず、itemsLessThanTenを定義しましょう。

vfor.html

<script>
new Vue({
  el: "#app",
  data() {
    return {
      objectItems: {
        key1: 'item1',
        key2: 'item2',
        key3: 'item3'
      },
      shoppingItems: [
        { name: 'apple', price: '7' },
        { name: 'orange', price: '12' }
      ]
    }
  },
  computed: {
    itemsLessThanTen: function() {
      return this.shoppingItems.filter(function(item) {
        return item.price < 10;
      })
    }
  }
});
</script>

次に、v-forをitemsLessThanTenを使用するように変更しましょう。

vfor.html

<div id="app">
  <ul>
    <li v-for="item in itemsLessThanTen" v-bind:key="item.name">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

外観は次のとおりです。

Output
<div id="app">
  <ul>
    <li>apple - 7</li>
  </ul>
</div>

itemLessThanTen関数は、JavaScript filter関数を使用して、価格が10未満のアイテムを返します。

メソッドを使用してアイテムをフィルタリングする

このアプローチでは、同じshoppingItemsリストを定義したメソッドに直接渡します。そうすることで、配列内のすべてのアイテムがメソッド定義に従ってフィルタリングされます。

まず、filterItemsを定義しましょう。

vfor.html

<script>
new Vue({
  el: "#app",
  data() {
    return {
      objectItems: {
        key1: 'item1',
        key2: 'item2',
        key3: 'item3'
      },
      shoppingItems: [
        { name: 'apple', price: '7' },
        { name: 'orange', price: '12' }
      ]
    }
  },
  computed: {
    itemsLessThanTen: function() {
      return this.shoppingItems.filter(function(item) {
        return item.price < 10;
      })
    }
  },
  methods: {
    filterItems: function(items) {
      return items.filter(function(item) {
        return item.price < 10;
      })
    }
  }
});
</script>

次に、v-forをfilterItemsを使用するように変更しましょう。

vfor.html

<div id="app">
  <ul>
    <li v-for="item in filterItems(shoppingItems)" v-bind:key="item.name">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

外観は次のとおりです。

Output
<div id="app">
  <ul>
    <li>apple - 7</li>
  </ul>
</div>

filterItemsメソッドは、computed値の例と同じ機能を実行し、最終結果は同じになります。

結論

この記事では、Vueアプリケーションでのv-forの使用について学習しました。範囲、キー、computed、およびmethodsを紹介しました。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036

序章

前提条件

範囲でv-forを使用

<template>要素の使用

オブジェクトでのv-forの使用

アレイでのv-forの使用

v-bind:keyを使用して要素を追跡する

変更の管理

変更管理の問題

フィルタリングリスト

computed値を使用したアイテムのフィルタリング

メソッドを使用してアイテムをフィルタリングする

結論

getdocs

範囲で`v-for`を使用

`<template>`要素の使用

オブジェクトでの`v-for`の使用

アレイでの`v-for`の使用

`v-bind:key`を使用して要素を追跡する

`computed`値を使用したアイテムのフィルタリング