My Vue form component, created in TypeScript, functions correctly during runtime but does not pass type-checking. An error is thrown stating that the
property 'title' is not present on the enclosing object typev-model. Am I missing something here? Or is it just too much magic for TypeScript to handle? The error specifically points to this line:
body: JSON.stringify({ title: this.title, done: false }),
Here's the complete component code:
<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>