javascript - 在 Vue 模板中显示一个对象

Question

我有一个像这样的对象：

Obj = {
  'min_mix': 1, 
  'max_mix': 2,
  'climbing': {
    'easy':[
      {
        'hour': 1.0, 
        'id':0,
      }
    ],
    'height': [
      {
        'hour': 1.0, 
        'price': 100
      }
    ]
  }
} 

我必须在我的 HTML 中显示这个：

min_mix : 1
max_mix : 2

climbing:

easy: 
hour : 1.0
id : 0

height:
hour: 1.0
price: 100

现在我使用了一些 v-for，但我没有一个好的结果，我不明白如何正确显示数组的简单和高度？

https://jsfiddle.net/CanadianDevGuy/fjaoztgn/15/

标签： javascriptvue.js

Answer 1

请检查此 https://jsfiddle.net/Lewvsp0k/

<v-card-text v-for='(value,name) in obj' :key='name' class="pt-0 pb-0">
      <template v-if="typeof value !== 'object'">
                    <b>{{name}} : {{ value }} </b> 
              </template>
              <template v-else>
                <div v-for="(rowValue, rowIndex) in value" :key='rowIndex' class="mb-2 pa-0">
                 <b>{{name}} :  </b> 

                  <div v-for="(rowValue1, rowIndex1) in rowValue" :key='rowIndex1' class="mb-2 pa-0">
                     <b>{{rowIndex1}}  : </b> 
                 <div>

                   <div v-for="rowValue2 in rowValue1" :key='rowValue2' class="mb-2 pa-0">

                  <div v-for="(rowValue3, rowIndex3) in rowValue2" :key='rowValue3' class="mb-2 pa-0">
                     <b> {{rowIndex3}} : {{rowValue3}}  </b> 

                   </div>
                </div>
               </div>
            </div>

         </div>
       </template>
</v-card-text>