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">
</form>

Then in component

...
export class AppComponent {

   public name!: string;

   onSubmit(formData: string) {
      console.log(formData)
   }
}

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) {
    console.log(formData)
  }
}
<template>
  <div>
    <form>
      <p>
        <label for="name">Name</label> <br>
        <input type="text" placeholder="name" id="name" name="name" v-model="name"/>
      </p>
      <button type="submit">Send</button>
    </form>
  </div>
</template>

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



Read more here: https://stackoverflow.com/questions/68476675/grab-template-form-input-in-vue-3-class-components-like-done-in-angular

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: