动态循环对象的键

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内进行对象属性迭代。