Vue3 + Typescript，無法在 textarea 上添加 v-model

Question

我正在嘗試將 v-model 添加到我的 Vue 組件中的元素，但我收到以下錯誤，我不明白為什么：

Property 'textInput' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;

零件：

<template>
  <h1>Check how often a word is repeated in your text:</h1>
  <textarea
    name="userInput"
    id="userInput"
    cols="30"
    rows="10"
    v-model="textInput"
  ></textarea>

  <CheckButton />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import CheckButton from "./CheckButton.vue";

export default defineComponent({
  name: "FrequencyBox",
  components: {
    CheckButton,
  },
});
</script>

<style></style>

Answer 1

您可以使textInput與ref反應並返回它：

請檢查以下片段：

 const { ref } = Vue const app = Vue.createApp({ el: "#demo", setup() { const textInput = ref(null) return { textInput } } }) app.mount('#demo')

 <script src="https://unpkg.com/vue@3"></script> <div id="demo"> <h3>Check how often a word is repeated in your text:</h3> <textarea name="userInput" id="userInput" cols="30" rows="5" v-model="textInput" ></textarea> {{ textInput }} </div>