I use : Vue3 with TS, axios, sequelize.

I'm creating a form with just 1 textarea, to post a post on a wall, and I wrote that script in my component form :

<template>
  <div id="PostText" class="col-12">
    <form id="postTextForm">
      <div id="PostwriteContent">
        <label for="PostContent">
          <h2>Lâchez 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>

But I have some errors where I use "this." it doesn't found the name theNewPost , errorMessage, So I don't understand the point cause I defined those terms in data and I use them in V-model.

Moreover in my form where I bind my 2 functions, they doesn't run . Do you know which mistakes I did. Please.

Thanks ;)

CodePudding user response：

To enable TypeScript support, wrap the component with defineComponent():

import { defineComponent } from 'vue'

export default defineComponent({
  data() { ... },
  methods: { ... },
  computed: { ... },
})

Also note your data() return should be literals (not initialized to String or Number):

data() {
  return {
    errorMessage: '',
    theNewPost: {
      content: '',
      userId: 0
    }
  };
}