vue で 2 層オブジェクトを配列に変換する方法 (2 つの方法)

Vue は、Web アプリケーションを迅速に開発するための JavaScript フレームワークです。 Vue では通常、データ管理にオブジェクトを使用しますが、トラバースと操作を容易にするためにオブジェクトのプロパティ値を配列に変換する必要がある場合があります。この記事では、Vue で 2 層オブジェクトを配列に変換する 2 つの方法を紹介します。

方法 1: ダブル トラバーサルを使用する

ダブル トラバーサルは、オブジェクト内の属性値を配列に変換するのに役立つ簡単な方法です。まず、Vue が提供する v-for ディレクティブを使用して、オブジェクトのすべてのプロパティを走査する必要があります。次に、各プロパティに対応するオブジェクトを内部で反復処理し、配列に変換します。以下はサンプル コードです。

<template>
  <div>
    <ul>
      <li v-for="(obj, index) in object" :key="index">
        {{ index }}
        <ul>
          <li v-for="(value, key) in obj" :key="key">
            {{ key }}: {{ value }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        'obj1': { 'key1': 1, 'key2': 2 },
        'obj2': { 'key3': 3, 'key4': 4 }
      },
      array: []
    }
  },

  methods: {
    convertObjectToArray() {
      Object.keys(this.object).forEach(key => {
        const obj = this.object[key]
        const objArray = Object.keys(obj).map((prop) => {
          return {
            [prop]: obj[prop]
          }
        })
        this.array = [...this.array, ...objArray]
      })
    }
  },
}
</script>

上記のコードでは、最初に v-for 命令を使用してオブジェクト オブジェクト内の各属性を走査し、各属性に対応するオブジェクトを内部的に走査します。次に、Object.keys() メソッドを使用して各オブジェクトのキーを取得し、キーと値を含むオブジェクトに変換します。最後に、オブジェクトを配列に変換するという目的を達成するために、変換されたすべてのオブジェクトを配列に追加します。このメソッドを ConvertObjectToArray() メソッドで呼び出して、Vue インスタンスのオブジェクト プロパティ値で構成される配列を取得できます。

方法 2: lodash ライブラリを使用する

lodash ライブラリに詳しくない場合は、これは多くの一般的な Javascript ツール機能を提供するオープン ソース ライブラリです。これを使用すると、コードの処理が簡素化され、コードの量が削減されます。 Vue アプリケーションでは、lodash ライブラリの _. flatMapDeep() メソッドを使用して、オブジェクト内のプロパティを配列に変換できます。

以下は、lodash ライブラリを使用したサンプル コードです:

<template>
  <div>
    <ul>
      <li v-for="(obj, index) in object" :key="index">
        {{ index }}
        <ul>
          <li v-for="(value, key) in obj" :key="key">
            {{ key }}: {{ value }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      object: {
        'obj1': { 'key1': 1, 'key2': 2 },
        'obj2': { 'key3': 3, 'key4': 4 }
      },
      array: []
    }
  },

  mounted() {
    this.array = _.flatMapDeep(this.object)
  }
}
</script>

上記のコードでは、インポートされた lodash ライブラリを使用し、mounted() メソッドで _. flatMapDeep() を呼び出します。このメソッドは、オブジェクトオブジェクト内のすべてのプロパティ値を配列に変換し、Vue インスタンスの配列プロパティに格納します。

概要:

この記事では、Vue アプリケーションでオブジェクトのプロパティ値を配列に変換する 2 つの方法を紹介します。どちらの方法も非常にシンプルで使いやすいですが、ニーズに応じて実装を選択してください。より完全なサンプル コードが必要な場合は、下のリンクをクリックして GitHub リポジトリをチェックアウトできます。

以上がvue で 2 層オブジェクトを配列に変換する方法 (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。