在事先不知道键值对的情况下迭代 v-for 中的数组

Posted 2023-02-23

【中文标题】在事先不知道键值对的情况下迭代 v-for 中的数组

【英文标题】：Iterate over array in v-for without knowing key-value pair beforehand

【发布时间】：2020-07-31 15:23:18

【问题描述】：

我有一个这样的对象数组：

[  Articulo: "Producto 1", Precio: "2.95" ,  Articulo: "Producto 2", Precio: "2.95"   ]

我想使用 v-for 循环遍历对象，以便显示带有如下文本的 div：

Articulo -> Producto 1

Articulo -> Producto 2

但是，由于数组是从函数自动生成的，我事先不知道键/值对，所以我不知道如何在模板中显示该信息。

知道我该如何处理吗？

【参考方案1】：

如果你只想要第一个属性，你可以这样做：

new Vue(
  el: "#app",
  data() 
    return 
      arr: [
         Articulo: "Producto 1", Precio: "2.95" ,
         Articulo: "Producto 2", Precio: "2.95" 
      ]
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="obj in arr">
     Object.keys(obj)[0]  ->  Object.values(obj)[0] 
  </div>
</div>

^{（过去无法保证 javascript 中的属性顺序以确保您获得 Articulo 而不是 Precio，但现在可以肯定这不是问题，尤其是使用 Vue CLI。）}

如果你想要所有属性，你可以遍历对象键/值对：

new Vue(
  el: "#app",
  data() 
    return 
      arr: [
         Articulo: "Producto 1", Precio: "2.95" ,
         Articulo: "Producto 2", Precio: "2.95" 
      ]
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="obj in arr">
    <div v-for="(value, key) in obj">
       key  ->  value 
    </div>
  </div>
</div>