[Vuejs]-Vuejs iterate complex object by data key

by

0👍

✅

Another approach to minimize template code could be to define a computed:

    const article_specs = computed(() => {
      let result = '';
      Object.keys(article.specs).forEach((item) => {
    
        result +=  article.specs[item].value + 'todo'
        console.log("item", article.specs[item])
    
      })

  return result;
})

And template code became:

{{article_specs}}
👤user2239318

2👍

If you want to use brackets [] to access into a propery name, use an string inside brackets ["text"]

<template>
  <li v-for="(value, propertyName, index) in article.specs">
    {{ propertyName }}:  {{ value["text"] }} ({{ index }})
  </li>   
</template>
👤Hans Felix Ramos

1👍

Solution # 1

Can call prop of object by name.

value.text

// or

value["text"]

Can call property of object by dynamically variable.

const name = "text"
value[name]

Solution # 2

Can use for loop.

<span v-for="propValue of value">{{ propValue }}</span>

Example

const { createApp, reactive } = Vue

const app = createApp({
  setup() {
    const article = reactive({
      code: 'code',
      specs: {
        type: { text: 'description type', value:'mytype'} ,
        prop1: { text: 'description prop1', value: 'myprop1' },        
        prop2: { text: 'description prop1', value: 'myprop1' },                
      },
      dimensions: { base: 10, height: 20}
    })

    return { article }
  }
}).mount('#app')
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>

<div id="app">
  <h2>Your code</h2>
  <ul>
    <li v-for="(value, propertyName, index) in article.specs">
      {{ propertyName }}:  {{ value }} ({{ index }})
    </li>
  </ul>
  
  <h2>Solution # 1</h2>
  <ul>
    <li v-for="(value, propertyName, index) in article.specs">
      <div style="display: flex; gap: 8px;">
        <span>{{ propertyName }}:</span>
        
        <!-- can use object.name or object[name] formats -->
        <!-- can add dynamically name if use object[name] format -->
        <span>{{ value.text }}</span> <!-- or value["text"] -->
        <span>{{ value["value"] }}</span> <!-- or value.value -->
        
        <span>{{ index }}</span>
    </li>
  </ul>
  
  <h2>Solution # 2</h2>
  <ul>
    <li v-for="(value, propertyName, index) in article.specs">
      <div style="display: flex; gap: 8px;">
        <span>{{ propertyName }}:</span>

        <!-- can use for loop -->
        <span v-for="propValue of value">{{ propValue }}</span>

        <span>{{ index }}</span>
      </div>
    </li>
  </ul>
</div>
👤rozsazoltan

0👍

Use correct separator: not [] but . !

  {{ propertyName }}:  {{ value.text }} ({{ index }})
👤user2239318

Leave a comment