在 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，但我没有得到好的结果，我不明白如何正确显示 easy 和 height 中的数组？

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

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>

Answer 2

应该管用

<template v-for="(item, index) in Obj ">
<template v-if="typeof item !== Object">
    <div :key="index">
        {{ index }} : {{ item }}
    </div>
</template>
<template v-else>
    <div :key="'subitem' + indexSubItem" v-for="(subItem, indexSubItem) in item">
        {{ indexSubItem }} : {{ subItem }}
    </div>
</template>
</template>

Answer 3

最简单的方法是实际创建一个新组件，比如<object-entry> ，它可以执行迭代嵌套逻辑：如果它遇到的值是字符串或数字，我们直接打印出来； 否则，我们在其中嵌套另一层<object-entry> 。

<object-entry>组件（您也可以将其重命名为您喜欢的任何名称，这更有意义）将执行以下操作：

1. 始终打印键值对中的键。
2. 决定它是否应该打印键值对中的值：
   • 如果值是字符串/数字类型，我们打印它
   • 如果值不是（那么它是一个数组或对象），我们然后再次调用组件本身（有效地递归嵌套自身）

在伪代码中它看起来像这样：

<div>
    <strong>{{ key }}</strong>: 

    <template v-if="isStringOrNumber(value)">
        {{ value }}
    </template>

    <object-entry
        v-else />

</div>

这确保我们将继续缩进，直到遇到数字或字符串的“最底部”值。

---

注意：由于数据的结构方式，您无法真正摆脱标记中的对象索引：如果climbing应该只包含“easy”和“height”，则不应将它们双重嵌套在无意义的键中0 。 同样，对于easy和height ，当它们本身应该只是一个对象时，将它们存储为对象数组毫无意义。

---

请参阅此处的概念验证，以及对数据的建议更改（您也可以使用原始数据结构，但它会带有无关的嵌套级别）：

 Vue.use(Vuetify); Vue.component('object-entry', { template: '#object-entry-template', props: ['entryKey', 'entryValue'], methods: { isStringOrNumber: function(v) { return typeof v === 'string' || typeof v === 'number'; } } }) var vm = new Vue({ el: "#app", data: () => ({ obj: { 'min_mix': 1, 'max_mix': 1, 'climbing': { 'easy': { 'hour': 1.0, 'id': 0 }, 'height': { 'hour': 1.0, 'price': 100.0 } } }, }) });

 <link href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css" rel="stylesheet"/> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script> <div id="app"> <v-app> <object-entry v-for="(value, key) in obj" v-bind:key="key" v-bind:entry-key="key" v-bind:entry-value="value" /> </v-app> </div> <script type="text/x-template" id="object-entry-template"> <v-card-text class="pt-0 pb-0"> <strong>{{ entryKey }}</strong>: <template v-if="isStringOrNumber(entryValue)"> {{ entryValue }} </template> <,-- Here, the component nests itself if value is not a string/number --> <object-entry v-else v-for="(value: key) in entryValue" v-bind:key="key" v-bind:entry-key="key" v-bind:entry-value="value" /> </v-card-text> </script>