Vue component on Typescript doesn't bind 2 ways

Question

I define my vue component as a Typescript class thus:

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

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

}

and call it from my entry file thus:

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

attaching it to the following HTML:

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

The component is initialised correctly and displays my test message, but the 'test' variable isn't binded - when I update the input field the value doesn't change, and I don't see any data binding when checking it on the Vue devtools.

Any advice?

Thanks, Y.

Ben Croughs Ben Croughs · Accepted Answer · 2018-12-18T20:58:01

check your console log: does it contains: Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

solution, see: https://codesandbox.io/s/vnlo3rq283

but in short: initialize your variable

test: string = "";

Vue component on Typescript doesn't bind 2 ways

1 Answers