Question

我有使用TypeScript编写的简单Vue表单组件。当我运行它时它可以工作，但不进行类型检查。它说property 'title' is not present on the enclosing object type是正确的，因为它是一个v-model引用。难道我做错了什么？还是太适合TypeScript处理魔术了？错误发生在以下行：

body: JSON.stringify({ title: this.title, done: false }),

这是整个组件：

<template>
    <form>
        <label>
            Title
            <input type="text" v-model="title">
        </label>
        <input type="button" value="Submit" v-on:click="submitData()">
    </form>
</template>

<script lang="ts">
export default {
    name: "TodoForm",
    data: function () {
        return { title: "" }
    },
    methods: {
        submitData: function() {
            fetch('http://localhost:8000/api/v1/todo/', {
                method: "POST",
                headers: new Headers({"Content-Type": "application/json"}),
                body: JSON.stringify({ title: this.title, done: false }),
            })
        }
    }
}
</script>

Answer 1

Vue CLI docs状态：

要让TypeScript正确推断Vue组件选项中的类型，您需要使用Vue.component或Vue.extend定义组件

因此，它应该看起来像这样：

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      title: ''
    }
  },
  methods: {
    submitData() {
      console.log(this.title)
    }
  }
})
</script>

Vue组件中此属性的缺失属性

1 个答案: