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

【问题标题】：Iterate over array in v-for without knowing key-value pair beforehand在事先不知道键值对的情况下迭代 v-for 中的数组
【发布时间】：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

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

知道我该如何处理吗？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component v-for

【解决方案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>

【讨论】：