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>
CodePudding user response:
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>
CodePudding user response:
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" >
<div v-for="(car,key, index) in cars" :key="index">
<div >{{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>