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?

typescriptvue.jsvue-class-components

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

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); 
  }  

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the contrast between element.getAttribute() value and a String in protractor?

When using protractor and typescript, I need to verify that the text saved in a textbox matches a certain string by comparing it with the resulting value of element.getAttribute("value"). Unfortunately, getText() does not work for this scenario b ...

typescriptseleniumselenium-webdriverautomated-testsprotractor

Creating a package exclusively for types on NPM: A step-by-step guide

I'm looking to set up a package (using either a monorepo or NPM) that specifically exports types, allowing me to easily import them into my project. However, I've run into some issues with my current approach. import type { MyType } from '@a ...

typescriptnpmmonorepo

Navigating an Array in Typescript

Angular is linked to node.js, which interacts with mongodb to fetch data successfully. However, I am now faced with the challenge of mapping variables in my typescript component to the backend node.js. When viewing the data structure in the browser consol ...

javascriptnode.jsangulartypescript

What are the limitations of using a JS file within an Angular application?

I am struggling to integrate some js methods from a file into an angular application. Unfortunately, the browser is unable to recognize the js file. I have tried following the guidelines in this SO post, but the browser still cannot locate the file in the ...

javascriptnode.jsangulartypescriptecmascript-6

What is the way to assign a variable to ngClass in Angular?

I'm currently working on creating modals that will display different content based on which button is clicked. Each button should trigger a unique modal to appear, each with its own specific content inside. When a button is clicked, the 'active&a ...

angulartypescriptng-class

Understanding how Vue JS parses query parameters can enhance the functionality and

How can I read query values using the following code? {{$route.query.id}} I am trying to pass that id to another route, but it seems like my current approach is not working. Here's what I have: startExam(){ this.$router.push({ path:&a ...

vue.jsvue-router

Utilize the identical function value within a Vue template

In my template, I am encountering a recurring situation where I need to retrieve a value from a function. This function takes parameters from the template (such as the index of a v-for loop) and returns a result that is then displayed on the template. The ...

javascriptvue.jstemplates

Basic exam but located in a place that is not valid

Here is a test I am working on: // import {by, element, browser} from "protractor"; describe('intro', () => { beforeEach(() => { browser.get(''); }); it('should have multiple pages', () => { let buttonOn ...

javascriptnode.jsseleniumtypescriptprotractor

Tips for merging DTO (Data Transfer Object) with non-DTO objects

I'm currently working on a new endpoint and I need to validate only two parameters (limit and offset) with the dto. The third parameter is not supposed to be checked. My controller test code is not functioning as expected. When I try to use it, the e ...

typescriptnestjs

Vue - understanding the process of validating information from Vuex store

My project involves a complex form with approximately 17-20 fields, potentially influenced by the status of a checkbox. The intention is to submit this form to an API backend. The proposed strategy includes validating the user input using Vuelidate and pr ...

vue.jsvuelidate

Decoding the HTML5 <video> tag using the html-react-parser library

I'm working on a NextJS V13 app where I need to display HTML content fetched from a CMS. Instead of using dangerouslySetHtml, I opted for the html-react-parser package to parse the HTML and replace certain embedded tags like <a>, <img>, an ...

typescriptdomnext.js

What is the best way to transform Adobe XD designs into HTML and CSS with Vue.js?

I am looking to create a single page application with vue.js and came across this helpful reference at . A colleague has created a prototype using Adobe XD, and now my task is to transform it into HTML/CSS while making it functional and connecting it to an ...

htmlcsstwitter-bootstrapvue.jsconverters

What is the best way to integrate an array from an external JavaScript file into a Vue.js component?

I am struggling to import an array into a Vue component: This is my simplified component: <script type="text/babel"> const codes = require('./codes.js'); export default { props: [], data() { return { ...

javascriptvue.jsvue-component

Data retrieval from DynamoDB DocumentClient does not occur following a put operation

I am currently working on testing a lambda function using the serverless framework in conjunction with the sls offline command. The purpose of this lambda is to connect to my local DynamoDB, which has been initialized with a docker-compose image, and inser ...

node.jstypescriptamazon-web-servicesamazon-dynamodbserverless

Angular2 - leveraging root-relative imports

Having trouble with imports in angular2/typescript? Want to use paths relative to the project root like 'app/components/calendar', but currently stuck using something like this: //app/views/order/order-view.ts import {Calendar} from '../../ ...

typescriptangular

Utilizing v-model in Vue.js for bidirectional data binding

After browsing through various discussions on the topic of v-model, I've found most tutorials to be confusing and lacking in clarifying how exactly two-way data bindings can be achieved with v-model. My goal is to establish a connection between a dat ...

vue.js

Using Promise.all for multiple function calls

I have several functions set up like this: private async p1(): Promise<Result> { let p1; // Do some operations. return p1; } private async p5(): Promise<void> { // Make a call to an external API. } Some of these functions c ...

typescriptpromise

Utilizing Additional Parameters in Vuetify Rule Declarations

I am looking to establish a set of rules that can be applied universally across all fields. In order to achieve this, I need the ability to include additional parameters in my rules, such as setting a maxlength of 20 for one field and a maxlength of 50 f ...

vue.jsvuetify.js

Using an external script to modify or call a Vue.js method

My Vue app is constructed using Webpack and includes a few basic computed properties, such as calculating the sum amount from input values. However, I now require the capability to replace the summation function with one stored in a separate file that is n ...

javascriptvue.js

The function 'appendChild' is not recognized on the type 'unknown'.ts(2339)

I'm encountering an issue while trying to integrate the Utterances component into my articles. Upon attempting to build the site, I receive the following error message: "Property 'appendChild' does not exist on type 'unknown' ...

reactjstypescriptnext.js