我有使用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>
答案 0 :(得分: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>