How to have a function outside Vue instance have proper `this` context?

Question

I'm having a great deal of trouble with my Vue component.

<script lang="ts">
import Vue from 'vue';
import { ElForm } from 'element-ui/types/form';

type Validator = (
  this: typeof PasswordReset,
  rule: any,
  value: any,
  callback: (error?: Error) => void
) => void;

const validatePass1: Validator = function(rule, value, callback) {
  if (value && this.form.passwordConfirm) {
    (this.$refs.form as ElForm).validateField('passwordConfirm', valid => {});
  }
};

const PasswordReset = Vue.extend({
  // ...

In the validatePass1 func, this.form is underlined as an error, as is this.$refs. Respectively:

"Property 'form' does not exist on type 'VueConstructor<{ form: { password: string; passwordConfirm: string; }; rules: { password: ({ requ...'."

"Property '$refs' does not exist on type 'VueConstructor<{ form: { password: string; passwordConfirm: string; }; rules: { password: ({ requ...'."

How do I get this function to recognize refs/props/data attached to my component?

Cosimo Chellini · Accepted Answer · 2018-07-27 15:00:01Z

1

you can instantiate vue globally,

window.vm = new Vue ({...});

and referencing it anywhere in your ts file like

window.vm.$refs.form

answered Jul 27, 2018 at 15:00

Cosimo Chellini

1,7201 gold badge16 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to have a function outside Vue instance have proper `this` context?

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