Question

我将我的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>

组件初始化正确并显示我的测试消息，但'test'变量没有绑定 - 当我更新输入字段时，值没有改变，我检查时看不到任何数据绑定在Vue devtools上。

有什么建议吗？

谢谢，收率

Answer 1

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

解决方案，请参阅：https://codesandbox.io/s/vnlo3rq283

但简而言之：初始化变量

test: string = "";

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

1 个答案: