在 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>