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

您可以像这样遍历整个对象，这里=AVERAGEIFS(C:C, A:A, E2, B:B, "<="&TODAY(), B:B, ">="&AGGREGATE(14, 7, B:B/((A$1:A$18=E2)*(B$1:B$18<=TODAY())), MIN(3, COUNTIFS(A:A, E2, B:B, "<="&TODAY()))))是变量名，index是值

item

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

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

动态循环对象的键

3 个答案: