时间戳

首页 > 解决方案 > Vuejs - 与 typecipt 模型类的两种方式绑定

typescript - Vuejs - 与 typecipt 模型类的两种方式绑定

问题描述

我正在尝试基于具有打字稿模型类的现有打字稿类结构设置一个新的 VueJs 应用程序。我需要如何集成 vuejs 双向绑定可以与它们一起使用的模型（识别模型上的更新）？

我试图导入模型类“人”并将它们设置为类变量。

<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(); 诀窍:(

标签： typescriptvue.js

解决方案

我认为问题在于您如何定义person. !in:public person! : Person; 是非空断言运算符，这意味着变量永远不会是nullor 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>

推荐阅读