I'm currently working on creating a simple todo list app using the Vue 3 Composition API along with Typescript. I've set up the submit function in the form to trigger the addTodo() method within the setup function. The goal is to add user-inputted values to the listItems array, which I initialized using the ref method. In my addTodo() function, I included
listItems.value.push(newTodo.value)Argument of type 'string' is not assignable to parameter of type 'never'Please find below the code snippet:
Template
<template>
<div class="container">
<form @submit.prevent="addTodo()">
<label>New ToDo</label>
<input
v-model="newTodo"
name="newTodo"
autocomplete="off"
>
<button>Add ToDo</button>
</form>
<div class="content">
<ul>
<li v-for="listItem in listItems" :key="listItem">
<h3>{{ listItem }}</h3>
</li>
</ul>
</div>
</div>
</template>
Script
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'Form',
setup() {
const newTodo = ref('');
const listItems = ref([]);
const addTodo = () => {
listItems.value.push(newTodo.value)
newTodo.value = ''
}
return { newTodo, listItems, addTodo }
}
});
</script>