21 - functional component

[geek4ctrl]

// your answers

<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}) => { const vnode = h( 'ul', p.list.map((value, index) => { return h('li', { style: { color: (p['active-index'] === index) ? "red" : null, cursor: "pointer" }, onClick: () => { emit('toggle', index) } } , value.name, ) }) ); return vnode; } const list = [{ name: "John", }, { name: "Doe", }, { name: "Smith", }] const activeIndex = ref(0) function toggle(index: number) { activeIndex.value = index } </script>