How to alter one Vue TypeScript Component from another?

Question

I am trying to get my feet wet with some technologies I've not used before, so I am working off the Visual Studio Vue project template. I have LoginDialog and LoginPanel components, and I'm trying to get the syntax right for having the 'Login' button in LoginPanel set a 'visible' attribute on LoginDialog.

// Login Dialog .ts
import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class LoginDialogComponent extends Vue {
    visible: boolean = false
}

// Login Panel .ts
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { LoginDialogComponent } from '../loginDialog/logindialog'

@Component
export default class LoginPanelComponent extends Vue {
    show() {
        LoginDialogComponent.visible = true
    }
}

But, in the browser I get an error about the line import { LoginDialogComponent } from '../loginDialog/logindialog' saying that

TS2305: Module '"ClientApp/components/loginDialog/logindialog"' has no exported member 'LoginDialogComponent'

I notice the LoginDialogComponent class has the export keyword, which would suggest it is exported, and the visible member doesn't allow the export keyword. Any idea what I'm mucking up here?

Edit

One other thought I had is maybe I need to be wiring these things up in my app.ts file, defined as:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component({
    components: {
        MenuComponent: require('../navmenu/navmenu.vue.html'),
        LoginPanelComponent: require('../loginPanel/loginpanel.vue.html'),
        LoginDialogComponent: require('../loginDialog/logindialog.vue.html')
    }
})
export default class AppComponent extends Vue {
}

I'm not 100% sure what it's doing here - do these component listings create instances of the classes they are referencing? If that's the case, I suppose I would have to pass the Dialog component to the Panel component, or have a reference to the Dialog in the App component, and pass that into the Panel?

Don't use braces in import { LoginDialogComponent }, use import LoginDialogComponent instead for default exported modules — Chirag Rupani
– Chirag Rupani, Commented Apr 14, 2018 at 7:11
Ah that may be it then! It removes the compile error, but then Property 'visible' does not exist on type 'typeof LoginDialogComponent when I try LoginDialogComponent.visible = true. Is there a way to access the imported instance? — Rollie
– Rollie, Commented Apr 14, 2018 at 11:48

MFry · Accepted Answer · 2018-08-16 17:54:39Z

1

Remove the curly braces from your import statement. They cause the error to occur when the imported class is the default exported class.

answered Aug 16, 2018 at 17:54

MFry

811 silver badge3 bronze badges

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

Comments

Aluan Haddad · Accepted Answer · 2018-04-14 06:00:16Z

0

This isn't anything to do with TypeScript really. It's just letting you know at compile time that what you're importing is not exported. The same exact thing is true in JavaScript.

When you have the following

// a.js
export default expression

You can import it in the following way

import anyValidIdentifer from './a.js';
takesDefaultExportOfA(anyValidIdentifer);

Which is a shorthand for

import * as anyValidIdentifer from './a.js';
takesDeafultExportOfA(anyValidIdentifer.default);

What you may be thrown off by is that the class that is exported is named. That does not mean it is incidentally named export. It is exported as the default. The name of the class is a module scoped local binding for that class, referring to it only only within the module that defines it, not without.

edited Apr 14, 2018 at 6:00

answered Apr 14, 2018 at 5:55

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

1 Comment

Rollie Over a year ago

I don't think the error message is not unclear in what it's saying; I don't know how to resolve though. export default LoginDialogComponent doesn't work. In your answer, is there something I can substitute for 'expression' and 'anyValidIdentifier' that will work in my particular situation?

Collectives™ on Stack Overflow

How to alter one Vue TypeScript Component from another?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related