Open Tofu-Xx opened 1 month ago
<script setup lang='tsx'> import { 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 = ({ list, activeIndex }, { emit }) => ( <ul>{ list.map(({ name }, i) => ( <li style={{ color: (activeIndex == i) ? 'red' : null }} onClick={() => { emit('toggle', i) }}> { name } </li> )) } </ul> ) const list = [{ name: "John", }, { name: "Doe", }, { name: "Smith", }] const activeIndex = ref(0) function toggle(index: number) { activeIndex.value = index } </script> <template> <list-component :list :activeIndex @toggle="toggle" /> </template>