Using Vue.js for bidirectional data binding with TypeScript model classes

Question

Using Vue.js for bidirectional data binding with TypeScript model classes

I am in the process of setting up a new VueJs application based on an existing Typescript-class structure with typescript model-classes. How should I integrate my models so that two-way-binding in vuejs can function properly and recognize updates on the model?

I attempted to import the model class "person" and declared it as a class variable.

<template>
        <form>
            <input type="text" v-model="person.name" />
            {{person.name}}
        </form>
    </template>

    <script lang="ts">
        import {Person} from '@/models/person';
        import Vue from 'vue';
        import {Component} from 'vue-property-decorator';

        @Component({})
        export default class Home extends Vue{
            public person! : Person;

            created(){
                this.person = new Person();
            }
        }
    </script>


    --- Following person.ts:

    export class Person{
        public name : string;
        public birthday: Date;
    }

My hope is that by changing the input field for "name", the '{{name}}' will also change... Currently, only calling this.$forceUpdate(); seems to do the trick :(

typescript vue.js

Answer 1

Answer №1

It seems like the issue lies in how you have defined the variable person. The exclamation mark ! in public person! : Person; indicates that the variable will never be null or undefined.

However, since you haven't assigned it a value in that statement, essentially you are doing:

public person!: Person = undefined;

To resolve this, consider removing the created function and simply initializing the variable like so:

public person: Person = new Person();

, which should function as intended.

Edit

As person is a prop, make sure to pass an instantiated Person object from the parent component into your child component.

Your parent component structure could appear similar to this:

<template>
  <div>
    <home :person="person"></home>
  </div>
</template>

<script lang="ts">
import Home from "@/components/home";
import Person from "@/models/person";

@Component({})
export default class Parent extends Vue {
  private person: Person = new Person();
}
</script>

Subsequently, in the child component (such as the Home component in your scenario), you would utilize it in this manner:

<template>
    <form>
        <input type="text" v-model="person.name" />
        {{person.name}}
    </form>
</template>

<script lang="ts">
    import {Person} from '@/models/person';
    import {Vue, Component} from 'vue-property-decorator';

    @Component({})
    export default class Home extends Vue {
        @Prop()
        public person!: Person;
    }
</script>

Answer 2

It seems like the issue lies in how you have defined the variable person. The exclamation mark ! in public person! : Person; indicates that the variable will never be null or undefined.

However, since you haven't assigned it a value in that statement, essentially you are doing:

public person!: Person = undefined;

To resolve this, consider removing the created function and simply initializing the variable like so:

public person: Person = new Person();

, which should function as intended.

Edit

As person is a prop, make sure to pass an instantiated Person object from the parent component into your child component.

Your parent component structure could appear similar to this:

<template>
  <div>
    <home :person="person"></home>
  </div>
</template>

<script lang="ts">
import Home from "@/components/home";
import Person from "@/models/person";

@Component({})
export default class Parent extends Vue {
  private person: Person = new Person();
}
</script>

Subsequently, in the child component (such as the Home component in your scenario), you would utilize it in this manner:

<template>
    <form>
        <input type="text" v-model="person.name" />
        {{person.name}}
    </form>
</template>

<script lang="ts">
    import {Person} from '@/models/person';
    import {Vue, Component} from 'vue-property-decorator';

    @Component({})
    export default class Home extends Vue {
        @Prop()
        public person!: Person;
    }
</script>

Using Vue.js for bidirectional data binding with TypeScript model classes

Answer №1

Edit

Similar questions

What is the best way to create a feature in Vue that filters options in real-time as we type into a

What is preventing the exclusion of the null type in this specific situation within Typescript?

Unable to access the 'mobile' property as it is not defined - Vue/Vuetify/Storybook

Issue transferring information between non-related components in an Angular 8 application unrelated to BehaviorSubject

Building a Multi-Language React Application with Real-Time Data

Connect a function to a functional component within React

Utilizing Environment Variables during the build process in a VueJS project

Exploring ways to set up dynamic child routes for Vue routers

What is the best method to compare two times and determine if they fall on the same date within an Angular 2/4 application? The time should be in the format of "HH:mm AM

What is the best way to send an enum from a parent component to a child component in

What causes the ignoring of config.proxy in axios requests while working on a webpack project?

Error encountered during an object casting operation at runtime

When hovering over the Angular div, a container will appear. However, the container suddenly disappears when attempting to hover over it further

Enhancements to managing universal configuration object across the entire application

Having trouble retrieving directive parameters in Vue.js?

Creating a map in Typescript initialized with a JSON object

Is there a way for me to use TypeScript to infer the type of the value returned by Map.get()?

What is the best way to invoke a computed property using dynamic styling?

What is the best way to incorporate node_module during the iOS build process in Ionic 2?

Why does my VueJS method only execute after I save changes in VS Code instead of reloading the page? Can someone provide assistance?