Suppose I have a list of items in Vue.JS
data () {
return{
items: [
{
itemID: 5,
itemText: 'foo'
},
{
itemID: 3,
itemText: 'bar'
}
]
}
}
Now, if I want to show the item with the itemID of 3 in a previously created element
<Item
v-for="item in items"
:key="item.itemID"
:item="item"
/>
I want to display all the content from that item (the ID and the text)
Item component :
<template>
<div class="item">
<div class="item-id">
<h1>ITEM ID: {{ item.itemID }}</h1>
</div>
<div class="item-task">
<h2>{{ item.itemText}}</h2>
</div>
</div>
</template>
<script>
export default {
name: 'Item',
props: ['item']
}
</script>