我正在學習vue.js并且有一個我想回圈的物件。我想制作一個組件，當資料發生變化時，它會動態更新，而不必系結鍵（motorLine1）等。
如何顯示父物件鍵（電機、輪子、門、座椅）并顯示每個鍵的值而無需系結motorLine1等？
資料
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"
}
}
},
環形
<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>
uj5u.com熱心網友回復：
在回圈中添加key屬性，v-for然后檢查當前專案是否是一個物件（陣列），然后回圈遍歷它，否則直接渲染它
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>uj5u.com熱心網友回復：
給你：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507929.html
標籤：javascript Vue.js
上一篇：從技術上理解反應性作業？