0

I'm using Vue 2 with a TypeScript layer (vue-property-decorator).

I have a class called BaseForm in a .vue file:

<template>
  <div class="base-form">
    <form>
      <slot />
    </form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class BaseForm extends Vue {
  comment = '';
}
</script>

I want to access the comment variable of the BaseForm class in a .ts file like so:

import BaseForm from '@/components/BaseForm.vue';
setComment(form: BaseForm, comment: string) {
  form.comment = comment;
}

But in the .ts file the BaseForm is not typed as class but as (Vue) interface and I can not access the variable.

My shims-vue.d.ts looks like (I got that from here):

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

I tried to add something like this (but it did not work):

declare module 'BaseForm.vue' {
  import BaseForm from '@/components/base/BaseForm.vue';
  export default BaseForm;
}

Any advice how to use a class in a non-vue file?

winklerrr
  • 13,026
  • 8
  • 71
  • 88
  • Using Vue-observable create a variable inside the component file. You can export it as well use inside the class too. It will be reactive everywhere. – FarazShuja Feb 22 '21 at 07:31
  • @FarazShuja I can't access the variable inside the component file from a plain `.ts` file as the plain `.ts` file loads every class as `interface Vue` which in return does not provide such a variable. – winklerrr Feb 22 '21 at 18:30
  • Ah right! Then you need to create either a vuex store or some mini module via Vue.observable and import in component as well as in ur .ts file. – FarazShuja Feb 24 '21 at 05:22

0 Answers0