vue에서 2계층 객체를 배열로 변환하는 방법(2가지 방법)

Vue는 웹 애플리케이션의 신속한 개발을 위한 JavaScript 프레임워크입니다. Vue에서는 일반적으로 데이터 관리를 위해 객체를 사용하지만, 탐색 및 작업을 용이하게 하기 위해 객체의 속성 값을 배열로 변환해야 하는 경우도 있습니다. 이 기사에서는 Vue에서 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 라이브러리의 _.platMapDeep() 메서드를 사용하여 객체의 속성을 배열로 변환할 수 있습니다.

다음은 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() 메서드에서 _.platMapDeep() 메서드를 호출합니다. 이 메소드는 객체 객체의 모든 속성값을 배열로 변환하여 Vue 인스턴스의 array 속성에 저장합니다.

요약:

이 글에서는 Vue 애플리케이션에서 객체의 속성 값을 배열로 변환하는 두 가지 방법을 소개합니다. 두 방법 모두 매우 간단하고 사용하기 쉽지만 필요에 따라 구현을 선택하십시오. 보다 완전한 예제 코드가 필요한 경우 아래 링크를 클릭하여 GitHub 저장소를 확인할 수 있습니다.

위 내용은 vue에서 2계층 객체를 배열로 변환하는 방법(2가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!