Question

我正在尝试基于具有Typescript模型类的现有Typescript类结构来设置新的VueJs App。我该如何集成vuejs双向绑定可以使用的模型（识别模型上的更新）？

我试图导入模型类“ person”并将其设置为类变量。

<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;
}

我的期望是，更改“ {{name}}”的“名称”的输入字段也会更改... 当前仅调用this。$ forceUpdate（）;。绝招：（

Answer 1

我认为问题在于您如何定义person。 !中的public person! : Person; 是非null断言运算符，这意味着变量将永远不会是null或undefined。

由于您并未在该表达式中为其分配值，因此您基本上是在写：

public person!: Person = undefined;

我相信，如果您删除创建的函数并且只是这么做：

public person: Person = new Person();，它将按您期望的那样工作。

编辑

由于person是一个道具，因此您需要从实现您组件的父级传入一个已经实例化的Person对象。

您的父组件需要看起来像这样：

<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>

然后子级（您示例中的Home组件）将像这样使用它：

<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>

Vuejs-使用typecipt模型类的两种方式绑定

1 个答案:

编辑