How to set up Vue 3 Composition API (Typescript) to push user-inputted value to array

Question

I am attempting to build a basic todo list app using Vue 3 Composition API with Typescript. I configured the submit function in the form to call addTodo() in the setup function. My intention is to push user-inputted values to the listItems array, which is initialized with the ref method. In my addTodo() function I added listItems.value.push(newTodo.value) in order to pass the inputted value to the array. However, I am getting an error on the newTodo.value parameter, saying Argument of type 'string' is not assignable to parameter of type 'never'. I am new to Composition API in Vue 3. How can I go about resolving this type error?

See my code below:

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>

Owl · Accepted Answer · 2022-01-16 08:52:44Z

4

You need to declare typing for listItems like this:

const listItems = ref<string[]>([]);

otherwise TypeScript won't know what type of array listItems is

answered Jan 16, 2022 at 8:52

Owl

6,9033 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JS_is_awesome18 Over a year ago

thanks! This works. Going back through my notes for Comp API, it's my understanding that reactive method is applicable to objects and arrays, while ref is applicable to primitives. Therefore, should I use reactive instead of ref in this case since I'm dealing with an array?

Owl Over a year ago

Can't speak from my experience because I haven't used Vue in a long time and haven't spent too much time with composition API, but I think this will help you decide on which to use. tl;dr is: use ref if you need to reassign the array (e.g. fetching new data from API), and use reactive if you don't need to reassign it, so in this case reactive probably suits you more

Estus Flask Over a year ago

@JS_is_awesome18 ref is applicable to everything. That reactive supports objects means there are less reasons to use ref for that but there still may be cases. The obvious one is when you need to have unambiguous uninitialized value (null) without relying on object contents (e.g. checking length). In your case reactive is ok

JS_is_awesome18 Over a year ago

I see, thanks. When is it absolutely necessary to use reactive instead of ref? From what I'm seeing, reactive cannot be used to handle primitives directly, without taking away the reactive properties of those primitives, so what is an example of a case where reactive should be used instead of ref?

Collectives™ on Stack Overflow

How to set up Vue 3 Composition API (Typescript) to push user-inputted value to array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related