Open
Description
<script setup lang='ts'>
import { h, ref } from "vue"
/**
* Implement a functional component :
* 1. Render the list elements (ul/li) with the list data
* 2. Change the list item text color to red when clicked.
*/
const ListComponent = (p, { emit }) => {
return h(
'ul',
{},
p.list.map((x, i) => {
return h('li', {
style: { color: (p['active-index'] == i) ? 'red' : null },
onClick: () => { emit('toggle', i) }
}, x.name)
})
)
}
const list = [{
name: "John",
}, {
name: "Doe",
}, {
name: "Smith",
}]
const activeIndex = ref(0)
function toggle(index: number) {
activeIndex.value = index
}
</script>
<template>
<list-component :list="list" :active-index="activeIndex" @toggle="toggle" />
</template>