Solution Review: Convert Options to Composition
Explore converting an Options API component to the Composition API in Nuxt 3. Understand the use of ref for reactive state, adapting methods, and maintaining template structure. This lesson helps you implement cleaner and more maintainable code using the Composition API.
We'll cover the following...
We'll cover the following...
Solution
The solution to the “Convert Options To Composition” challenge is provided below:
<script setup>
const todos = ref([]);
function addTodo() {
todos.value.push({
id: todos.value.length + 1,
title: `Todo number ${todos.value.length + 1}`,
});
}
addTodo();
</script>
<template>
<h1>Composition API Code</h1>
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo }}</li>
</ul>
<button @click="addTodo">Add Todo</button>
</template>
Implement the code solution
Explanation
Here ...