在 vue js v-for 中循环遍历数组中的对象

Question

我想在 vue js 中使用 v-for 遍历咖啡类型和价格

[{"Americano":"32$"},{"Espresso":"40$"},{"Cappuccino":"20$"},{"Americano":"32$"},{"Espresso":"40$"},{"Cappuccino":"20$"}]

Answer 1

看看您是否可以如下所述更改您的数据结构：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <div>Item: {{ item.title }}</div>
      <div>Price: {{ item.price }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'YouComp',
  data() {
    return {
      items: [
        { title: 'Americano', price: '32$' },
        { title: 'Espresso', price: '40$' },
        { title: 'Cappuccino', price: '20$' },
      ],
    };
  },
};
</script>

在 vue js v-for 中循环遍历数组中的对象

loop through objects in array in vue js v-for

vue.js

v-for