loop through objects in array in vue js v-for

Question

I want to loop through the coffee type and the price with v-for in vue js

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

Answer 1

See if you can change your data structure as mentioned below:

<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>