Typescript 上的 Vue 组件不绑定 2 种方式答案

【问题标题】：Vue component on Typescript doesn't bind 2 waysTypescript 上的 Vue 组件不绑定 2 种方式
【发布时间】：2018-07-09 06:04:51
【问题描述】：

我将我的 vue 组件定义为一个 Typescript 类：

import {Component} from 'vue-property-decorator'
import Vue from "vue";

@Component({})
export default class TestComponent extends Vue {
    test:string;

}

然后从我的入口文件中调用它：

let test = new TestComponent({el:'#element'});

将其附加到以下 HTML：

<section id="element">
    <h2>test is <span>{{test}}</span></h2>
    <form>
        <input type="text" name="test" v-model="test">
    </form>
</section>

组件已正确初始化并显示我的测试消息，但“测试”变量未绑定 - 当我更新输入字段时，值不会更改，并且在检查时我没有看到任何数据绑定在 Vue 开发工具上。

有什么建议吗？

谢谢，是的。

【问题讨论】：

标签： typescript vue.js vue-component

【解决方案1】：

检查您的控制台日志：它是否包含：属性或方法“test”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

解决办法，见：https://codesandbox.io/s/vnlo3rq283

但简而言之：初始化你的变量

test: string = "";

【讨论】：