Enhancing Vue functionality with vue-class-component and Mixins

Question

Enhancing Vue functionality with vue-class-component and Mixins

In my Vue project, I am using vue-class-component along with TypeScript. Within the project, I have a component and a Mixin set up as follows:

// MyComp.vue
import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.ts'

@Component
export class MyComp extends mixins(MyMixin) {
  compValue: string = 'Hello';
}


// mixin.ts
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class MyMixin extends Vue {
  created() {
    console.log(this.compValue); // TS2339: Property 'compValue' does not exist on type 'MyMixin'.
  }
}

Everything is functioning correctly, but TypeScript is throwing an error regarding the missing property 'compValue'. How can I resolve this issue?

typescript vue.js vue-class-components

Answer 1

Answer №1

The issue arises due to the absence of compValue in the context of MyMixin. If this pertains to an abstract class that is never directly instantiated and the presence of the property is guaranteed, it can be explicitly defined like so:

export default class MyMixin extends Vue {
  compValue: string;
  created() {
    console.log(this.compValue);
  }
}

Answer 2

The issue arises due to the absence of compValue in the context of MyMixin. If this pertains to an abstract class that is never directly instantiated and the presence of the property is guaranteed, it can be explicitly defined like so:

export default class MyMixin extends Vue {
  compValue: string;
  created() {
    console.log(this.compValue);
  }
}

Answer 3

Answer №2

When utilizing mixins, you will be inheriting from a class. TypeScript explains this concept accurately; the mixin class contains a created() lifecycle instead of a prop, while the MyComp class includes a prop. If you were to interchange the contents of both classes, it would function correctly as you would inherit the prop from the mixin.

Here is an example:

// --- mixin.ts -----------------
import Component from 'vue-class-component'

@Component
export default class MyMixin extends Vue {
  compValue: string = 'Hello';
}

// --- MyComp.vue ---------------- 
import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.ts'

@Component
export class MyComp extends mixins(MyMixin) {
created() {
    console.log(this.compValue); 
  }  

}

Answer 4

When utilizing mixins, you will be inheriting from a class. TypeScript explains this concept accurately; the mixin class contains a created() lifecycle instead of a prop, while the MyComp class includes a prop. If you were to interchange the contents of both classes, it would function correctly as you would inherit the prop from the mixin.

Here is an example:

// --- mixin.ts -----------------
import Component from 'vue-class-component'

@Component
export default class MyMixin extends Vue {
  compValue: string = 'Hello';
}

// --- MyComp.vue ---------------- 
import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.ts'

@Component
export class MyComp extends mixins(MyMixin) {
created() {
    console.log(this.compValue); 
  }  

}

Enhancing Vue functionality with vue-class-component and Mixins

Answer №1

Answer №2

Similar questions

The presence of catchError() within the pipe() function will display an error specifically at the .subscribe stage

"The interplay of Vue components: exploring the relationships, lifecycle hooks

What benefits does Laravel gain from including Vue? (Exploring the synergy between SPA and MVC)

How can I retrieve the object returned by an external API in VueJS?

"Although TypeOrm successfully generates the database, there seems to be a connectivity issue

Replace i18next property type in React for language setting

Injecting Server-side Singletons in NuxtJS

Limit pasted content in an Angular contenteditable div

Utilize the data structures and variables from one module to enhance the functionality

Which option is the speediest: using script setup or the setup function?

Dealing with Vue Route on Page Reload using MVC Controller

Upgrade from Next.js version 12

How to pass a value in Vue.js?

Retrieve the entire Vuetify component from v-autocomplete

What is the best way to merge two fetch requests in order to gather the required data?

Ways to show chosen items based on specific criteria in element-ui table

Button with circular icon in Ionic 4 placed outside of the toolbar or ion-buttons

The Cloudinary Nuxt Module is throwing an error: "Unexpected element cld-image"

What is the method to have VIM recognize backticks as quotes?

Having trouble getting the Vue.js Element-UI dialog to function properly when embedded within a child component