Iterate x amount of times when the key is not know in Vue.js

ottz0 0
Viewed 37

I'm learning vue.js and have an object that I want to loop through. I want to make a single component and when the data changes, it updates dynamically instead of having to bind the keys(motorLine1) etc.

How can I display the parent object keys (motor,wheels,doors,seats) and also display the values for each key without having to bind motorLine1 etc?

Data

data(){
        return {
            "cars": {
            "motor":[
                {"motorLine1": "print this line"},
                {"motorLine2": "print this line"}
            ],
            "wheels": "print this line",
            "doors":[
                {"doorsLine1": "print this line"},
                {"doorsLine2": "print this line"}
            ],
            "seats": "print this line"
        }
        }
    },

Loop

       <div v-for="(car, index) in cars" :key="index">
            {{index}}
            <div v-for="(test, index) in config" :key="index">
                {{'print the sub key value'}}
            </div>
        </div>
vue.js javascript
2 Answers

Add the key property inside the v-for loop then check if the current item is an object (array) so loop through it else render it directly

new Vue({
  el: '#app',
  data() {
    return {
      "cars": {
        "motor": [{
            "motorLine1": "print this line motor"
          },
          {
            "motorLine2": "print this line motor"
          }
        ],
        "wheels": "print this line wheels",
        "doors": [{
            "doorsLine1": "print this line doors"
          },
          {
            "doorsLine2": "print this line doors"
          }
        ],
        "seats": "print this line seats"
      }
    }
  },
})
.comp {
  color: #0215aa;
  font-weight: bold
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container">
  <div v-for="(car,key, index) in cars" :key="index">
    <div class="comp">{{key}}</div>
    <template v-if="typeof(car)==='object'">
      <div v-for="(test,subKey, i) in car" :key="i">
          <div v-for="item in test">
             ---{{item}}
          </div>
         </div>
       </template>
    <div v-else>---{{car}}</div>
  </div>
</div>

Boussadjra Brahim0

Here you go :

new Vue({
  el: '#app',
  data: {
    "cars": {
      "motor":[
        {"motorLine1": "print this line"},
        {"motorLine2": "print this line"}
      ],
      "wheels": "print this line",
      "doors":[
        {"doorsLine1": "print this line"},
        {"doorsLine2": "print this line"}
      ],
      "seats": "print this line"
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(carsKey, index) in Object.keys(cars)" :key="index">
    {{ carsKey }}
    <div v-for="(test, i) in cars[carsKey]" :key="i" v-if="typeof(test) === 'object'">
      <div v-for="(testKey, j) in Object.keys(test)" :key="j">
        {{ test[testKey] }}
      </div>
    </div>
    <div v-if="typeof(cars[carsKey]) === 'string'">
      {{ cars[carsKey] }}
    </div>
  </div>
</div>

Rohìt Jíndal0
Related