How to convert two-layer objects into arrays in vue (two methods)

Vue is a JavaScript framework for rapid development of web applications. In Vue, we usually use objects for data management, but sometimes we need to convert the property values ​​in an object into an array to facilitate our traversal and operations. This article will introduce two methods to convert two-layer objects into arrays in Vue.

Method 1: Use double traversal

Double traversal is a simple method that can help us convert the attribute values ​​​​in an object into an array. First, we need to use the v-for directive provided by Vue to traverse all properties of the object. Then, internally iterate over the object corresponding to each property and convert it into an array. The following is a sample code:

<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>

In the above code, we first use the v-for instruction to traverse each attribute in the object object, and internally traverse the object corresponding to each attribute. Then, we use the Object.keys() method to get the key of each object and convert it into an object containing the key and value. Finally, we add all converted objects to an array to achieve the purpose of converting objects into arrays. You can call this method in the convertObjectToArray() method to get an array consisting of object property values ​​in the Vue instance.

Method 2: Use the lodash library

If you are not familiar with the lodash library, it is an open source library that provides many common Javascript tool functions. Using it can simplify our processing of code and reduce the amount of our code. In a Vue application, we can use the _.flatMapDeep() method in the lodash library to convert the properties in an object into an array.

The following is a sample code using the lodash library:

<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>

In the above code, we use the imported lodash library and call _.flatMapDeep() in the mounted() method method. This method converts all property values ​​in the object object into an array and stores them in the array property of the Vue instance.

Summary:

This article introduces two methods of converting the property value of an object into an array in a Vue application. Both methods are very simple and easy to use, but choose the implementation based on your needs. If you need a more complete example code, you can check out the GitHub repository by clicking the link below.

The above is the detailed content of How to convert two-layer objects into arrays in vue (two methods). For more information, please follow other related articles on the PHP Chinese website!