Grab template form input in Vue 3 class components (like done in Angular)

I started vue 3 today, and opted for the class-based approach in the cli. I'm from the Angular background, so forgive me for thinking like Angular. Every example I see (even in the docs) is still using the Vue({...}) thing, however, I wanna do something like this (still thinking Angular-ish)

In angular, I can do this

<form #formData="ngForm" (ngSubmit)="onSubmit(formData.value)">
  <input (ngModel)="name" name="name" placeholder="name">

Then in component

export class AppComponent {

   public name!: string;

   onSubmit(formData: string) {

What would be the vue 3 class components approach like the above?

I currently have this in vue 3

export default class Welcome extends Vue {
  name!: string;

  onSubmit(formData: any) {
        <label for="name">Name</label> <br>
        <input type="text" placeholder="name" id="name" name="name" v-model="name"/>
      <button type="submit">Send</button>

What changes do I need to do to the above to connect the form in template to the component?

Read more here:

Content Attribution

This content was originally published by KhoPhi at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: