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.

tony19 · Accepted Answer · 2022-07-15 04:29:15Z

1

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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

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

but in short: initialize your variable

test: string = "";

edited Jul 15, 2022 at 4:29

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 18, 2018 at 20:58

Ben Croughs

2,6731 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue component on Typescript doesn't bind 2 ways

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related