動態循環對象的鍵

Question

我有一個來自上傳的對象

obj: {
    name: 'Mike'
    street: 'Love'
}

我可以通過它遍歷

<div v-for="test in obj">
    <span>{{test.name}}, {{test.street}}</span>
</div>

我得到很好的輸出。

但是，對象密鑰根據用戶上載而有所不同，有時密鑰會變成

obj: {
    address: 'street test 123',
    fine: '32 PHP',
    magic: 'Love'
}

我如何遍歷它才能變得動態起來？

Answer 1

您必須將所有鍵放在一個數組中，然后才能綁定它。

obj: {
address: 'street test 123',
fine: '32 PHP',
magic: 'Love'
}

var keys = Object.keys(obj);


<div>
    <span>{{keys.join(,)}}</span>
</div>

Answer 2

您可以像這樣遍歷整個對象，這里的index是變量名，而item是值

 var app4 = new Vue({ el: '#app-4', data: { obj: { address: 'street test 123', fine: '32 PHP', magic: 'Love' } } }) 

 <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app-4"> <div v-for="(item, index) in obj"> <span>{{item}}</span> </div> </div> 

Answer 3

我認為您不想為此目的使用v-for 。

這是我在不更改obj設置方式的情況下要做的事情：

<div id="foo">
  {{computedVal}}
</div>

在Vue實例中

new Vue({
   data: {
     // ... miscellaneous stuff
     obj: {
       prop1: 'val1',
       prop2: 'val2',
       prop3: 'val3',
     }
   },
   methods:{ /* ... */ },
   computed: {
      computedVal(){
        let str = '';
        for(let key in this.obj){
          let val = this.obj[key];
          str += `<span>${key} : ${val}</span>`;
        }
        return str;
      }
   }
});

這將是您的輸出：

<div id="foo">
   <span>prop1 : val1</span>
   <span>prop2 : val2</span>
   <span>prop3 : val3</span>
</div>

當然，您也可以在v-for執行此操作。

我的理解是，到目前為止，Vue不在v-for內進行對象屬性迭代。