Перебирать массив в v-for, не зная пары ключ-значение заранее

Question

У меня есть массив таких объектов:

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

Я хочу использовать v-for l oop для итерации по объектам, чтобы отобразить 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>

^{(Раньше в 1023 * не было никакой гарантии порядка собственности, поскольку вы получаете Articulo вместо Precio, но довольно уверен, что в настоящее время это не проблема, особенно с Vue CLI.)}

Если вы хотите все свойства, вы можете l oop по парам ключ / значение объекта:

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>