如何设置 Vue 3 Composition API (Typescript) 以将用户输入的值推送到数组

Question

我正在尝试使用带有 Typescript 的 Vue 3 Composition API 构建一个基本的待办事项列表应用程序。我将表单中的提交函数配置为在设置函数中调用 addTodo()。我的目的是将用户输入的值推送到 listItems 数组，该数组使用 ref 方法初始化。在我的 addTodo() 函数中，我添加了 listItems.value.push(newTodo.value) 以便将输入的值传递给数组。但是，我在 newTodo.value 参数上收到错误消息，显示 Argument of type 'string' is not assignable to parameter of type 'never'。我是 Vue 3 中 Composition API 的新手。我该如何解决此类型错误？

查看下面我的代码：

模板

<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 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>

Answer 1

您需要像这样为 listItems 声明类型：

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

否则 TypeScript 将不知道数组 listItems 是什么类型

如何设置 Vue 3 Composition API (Typescript) 以将用户输入的值推送到数组

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

typescript

vue.js

vue-component

vuejs3

vue-composition-api