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?

3
  • 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. Commented Feb 22, 2021 at 7: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. Commented Feb 22, 2021 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. Commented Feb 24, 2021 at 5:22

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.