我使用：Vue3 和 TS、axios、sequelize。
我正在創建一個只有 1 個文本區域的表單，以便在墻上發布帖子，并且我在組件表單中撰寫了該腳本：
<template>
<div id="PostText" class="col-12">
<form id="postTextForm">
<div id="PostwriteContent">
<label for="PostContent">
<h2>Lachez nous vos pensées...</h2>
</label>
<textarea
name="PostContent"
id="PostContent"
cols="65"
rows="6"
v-model="theNewPost.content"
autocapitalize="sentence"
form="postTextForm"
maxlength="650"
placeholder="Saisissez ici votre prose..."
required
autofocus
></textarea>
<button class="col-9" type="button" :disabled="!isFormValid" @click="sendMyPost">Poster</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 en ligne ;)' 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>
但是我在使用“this”時有一些錯誤。它沒有找到名稱 theNewPost ，errorMessage，所以我不明白這一點，因為我在資料中定義了這些術語并在 V-model 中使用它們。
此外，在我系結 2 個函式的表單中，它們不會運行 . 你知道我犯了哪些錯誤嗎？請。
謝謝 ;）
uj5u.com熱心網友回復：
要啟用 TypeScript 支持，請使用以下內容包裝組件defineComponent()：
import { defineComponent } from 'vue'
export default defineComponent({
data() { ... },
methods: { ... },
computed: { ... },
})
另請注意，您的data()回傳值應為文字（未初始化為String或Number）：
data() {
return {
errorMessage: '',
theNewPost: {
content: '',
userId: 0
}
};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/351073.html
上一篇：尋找由模板文字型別的任何可能組合組成的TypeScript型別
下一篇：作為引數傳遞時從物體更改型別