My tech stack includes Vue3 with TypeScript, axios, and sequelize. Currently, I am working on a form that contains just one textarea for users to post on a wall. Below is the script I have written in my form component:
<template>
<div id="PostText" class="col-12">
<form id="postTextForm">
<div id="PostwriteContent">
<label for="PostContent">
<h2>Share your thoughts with us...</h2>
</label>
<textarea
name="PostContent"
id="PostContent"
cols="65"
rows="6"
v-model="theNewPost.content"
autocapitalize="sentence"
form="postTextForm"
maxlength="650"
placeholder="Enter your text here..."
required
autofocus
></textarea>
<button class="col-9" type="button" :disabled="!isFormValid" @click="sendMyPost">Post</button>
</div>
</form>
</div>
</template>
<script lang="ts">
import axios from 'axios';
export default {
data() {
return {
errorMessage: String,
theNewPost: {
content: String,
userId: Number
}
};
},
methods: {
sendMyPost(e:any){
e.preventDefault();
console.log("testPost >>" + this.theNewPost.content);
console.log("theNewPost >>" + this.theNewPost);
axios.post("http://localhost:3001/api/feed", this.theNewPost)
.then((res) =>{
console.log('Post online ;)' + res)
})
.catch((err) => {
this.errorMessage = err.message;
console.error("There was an error!", err);
})
}
},
computed:{
isFormValid(){
if (
this.theNewPost.content !== ""
) {
return true;
} else {
return false;
}
}
},
};
</script>
However, I am encountering errors when using "this.". It seems that the names theNewPost and errorMessage cannot be found, even though I have defined them in data and used them in V-model.
Additionally, the two functions I have bound in my form are not running. Can you please help me identify the mistakes I have made? Thank you for your assistance ;)