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

Question

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

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

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

Articulo -> Producto 1

Articulo -> Producto 2

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

知道我该如何解决这个问题吗？

Answer 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。）}

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

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>

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

Iterate over array in v-for without knowing key-value pair beforehand

javascript

vue.js

vue-component

vuejs2

v-for