B
B
BonBon Slick2021-06-28 14:17:28
typescript
BonBon Slick, 2021-06-28 14:17:28

What is the correct way to pass parameter for @change in Vue + Typescript?

<input type='range'
                                       min='3'
                                       max='21'
                                       :value='this.age'
                                       class='form-control-range'
                                       @change='this.setAge($event.target.value)'
                                >

vue.runtime.esm.js?2b0e:1897 TypeError: this.setAge is not a function
    at change (_template.html?e0fd:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at HTMLInputElement.invoker (vue.runtime.esm.js?2b0e:2188)
    at HTMLInputElement.original._wrapper (vue.runtime.esm.js?2b0e:6961)

@Template
@Component<ModalSelectAge>(
    {
        components: {
        },
        mixins:     [],
    }
)
export default class ModalSelectAge extends Vue implements IUser{
    @namespace(USER).Getter
    age!: () => number;
    @namespace(USER).Action
    setAge!: (age: number) => number;


This is how it will work, but the IDE will issue a warning that the method was not found, no typing and autocomplete, static validation before compilation
@change='setAge($event.target.value)' // Element setAge is not exported

without the this modifier , the same method will be called, but with the parameter from the input.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question