I'm making a webpage using Nuxt and I would like to make a class and use it in one of my .vue files. I've tried using an import: import Card from "~/assets/mylib/Card.js" but that doesn't work. Not sure how to access my Card.js file inside of a .vue file.
index.vue
import Card from "~/assets/mylib/Card.js"
created() {
let card = new Card("blue")
}
Card.js
class Card {
constructor(color) {
this.color = color
}
}
error:
_assets_mylib_Card_js__WEBPACK_IMPORTED_MODULE_4___default.a is not a constructor
Modify Card.js as follows:
export default class Card {
constructor(color) {
this.color = color
}
}
Then import it from within index.vue as follows:
import { Card } from "~/assets/mylib/Card"
you have to update your Card.js like beow
export class Card {
constructor(color) {
this.color = color
}
}
and import in vue file like below
import { Card } from "~/assets/mylib/Card"
Related
The old directive from angular 6 doesn't working more.
(I need directive and not sample code in the component because of the need for dynamism that changes during the run.
this is the old directive code:
import { Directive, Input } from "#angular/core";
import { NgControl } from "#angular/forms";
#Directive({
selector: "([formControlName], [formControl])[disabledControl]"
})
export class DisabledControlDirective {
#Input() set disabledControl(state: boolean) {
const action = state ? "disable" : "enable";
this.ngControl.control[action]();
}
constructor(private readonly ngControl: NgControl) {}
}
I'm using this npm library https://www.npmjs.com/package/ng-offline to alert end user when offline.
<div class="alert alert-danger" ngOffline>You're offline. Check your connection!</div>
stackblitz here: https://stackblitz.com/edit/angular-ngoffline-npm?file=src%2Fapp%2Fapp.component.html
Works great - BUT I want to open a modal with this ngOffline directive, so I'm trying to access the directive from my angular 11 component but not sure how to approach this, any help on this would be greatly appreciated.
Is there away for me to open a ngx-bootstrap modal from the html with this directive?
Because the ng-offline module isn't exporting things as you might expect (i.e. you can't inject a standalone NgOfflineDirective for you to use without having it in your html file), you could add a block like this (where you've used #trigger to identify your ngOnline element):
import { AfterContentChecked, Component, ElementRef, OnDestroy, ViewChild } from '#angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';
import { distinctUntilChanged, filter } from 'rxjs/operators';
#Component({ ... })
export class YourClass implements AfterContentChecked, OnDestroy {
offline$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>();
subscription: Subscription;
#ViewChild('trigger') trigger: ElementRef;
constructor() {
this.subscription = this.offline$.pipe(
distinctUntilChanged(),
filter((offline: boolean) => offline),
).subscribe(() => this.showModal());
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
ngAfterContentChecked() {
if (
this.trigger &&
this.trigger.nativeElement
) {
this.offline$.next(this.trigger.nativeElement.style.display === "none");
}
}
showModal() {
console.log('Show your modal here.');
}
}
I have probably very profoundly simple question: how to invoke methods located in components from store.js, for instance I want a toast popup from store mutation. Any ideas?
The $bvToast can be found in BToast export. You can import it to use it.
import { BToast } from 'bootstrap-vue'
Example Class
import { BToast } from 'bootstrap-vue'
class uiUtils
{
showToast(message : string,title : string){
let bootStrapToaster = new BToast();
bootStrapToaster.$bvToast.toast(message, {
title: title,
toaster: "b-toaster-top-right",
solid: true,
appendToast: false
})
}
}
export default new uiUtils();
The documentation does show the individual component exports at the bottom of the page and can be found here Bootstrap Vue Documentation.
I'm trying to use propTypes for my RN application, but it never seems to be enforced. My component looks something like this:
import React, { Component } from "react";
import { Text } form "react-native";
export class Table extends Component {
render() {
return (<Text>...</Text>);
}
}
Table.propTypes = {
data: React.PropTypes.string,
};
This didn't warn I passed a number into the component from another file like this:
<Table data= { 2000 } />
So I tried making propTypes a static property of Table because I saw some stuff about ES6 working with propTypes that way:
import React, { Component } from "react";
import { Text } form "react-native";
export class Table extends Component {
static propTypes = {
data: React.PropTypes.string,
};
render() {
return (<Text>...</Text>);
}
}
Then I tried adding a plugin to my .babelrc file
"plugins": [
"transform-class-properties",
]
I've tried making the prop required
static propTypes = {
data: React.PropTypes.string.isRequired,
};
I've even tried changing the export class Table... to export default class Table... with no luck. I've tried every combination of the methods listed above to no avail. What am I missing?
The problem seemed to go away by itself when I was fiddling with the code. It may have been an env issue like #asaf david suggested, I'm not really sure. I tried to go back and change stuff back to see if I could reproduce, but I couldn't :(. I'm sorry to anyone searching this in the future.
I have a Menu and Search module. When I navigate between Menu and Search, I want to preserve my search results and Search.js state. I want modules to load via the router like a desktop application where state is maintained between module 'windows'.
App.html
<template>
<router-view></router-view>
</template>
Search.js
import {inject} from "aurelia-framework";
import {PortalData} from "./portalData";
import $ from 'jquery';
#inject(PortalData)
export class Search
{
constructor(portalData){
this.portalData = portalData;
this.criteria = "";
this.SearchResults = [];
}
DoSearch(startRow){
this.portalData.searchSevadars(criteria)
.then(res=> this.SearchResults = res;
}
}
Menu.js
import {inject} from "aurelia-framework";
import {PortalData} from "./portalData";
#inject(PortalData)
export class Start {
constructor(portalData){
this.portalData = portalData;
}
activate(){
return this.portalData.getApplications()
.then(apps => this.applications = apps);
}
The most obvious solution is to store state in another module.
Import some class in both views, then on search store it inside a property of that class.
By default aurelia uses singleton for injected classes, so you will have a shared instance between your views.
somestate.js
export class SomeState {
constructor(){
this.data = undefined;
}
}
import this module in both.
use data property to share data between modules;
Create a file called core.js (or something else of your choosing) in the root application folder /src with something like the following. I added some extra things here to make it more realistic but you could simplify it to meet your specific needs. My point is that this singular class could be used for a LOT of different things -- search text being just one of them.
/src/core.js
// Some example imports to support the common class
import { inject, noView } from 'aurelia-framework';
import { HttpClient, json } from 'aurelia-fetch-client';
import { I18N } from 'aurelia-i18n';
import { EventAggregator } from 'aurelia-event-aggregator';
#noView // this decorator is needed since there is no core.html
#inject(EventAggregator, I18N, HttpClient)
export class Core {
value1 = "Test data 1";
value2 = "Test data 2";
constructor(eventAggregator, i18n, httpClient) {
// store local handles
this.eventAggregator = eventAggregator;
this.i18n = i18n;
this.httpClient = httpClient;
// search info
this.SearchResults = [];
}
myCustomFunction() {
// some code here, available to any component that has core.js injected
}
}
Then, import and inject core.js into each of your other components, like this:
search.js
import {inject} from "aurelia-framework";
import {PortalData} from "./portalData";
import {Core} from "core";
import $ from 'jquery';
#inject(PortalData, Core)
export class Search
{
constructor(portalData, core){
this.portalData = portalData;
this.core = core;
this.criteria = "";
}
DoSearch(startRow){
this.portalData.searchSevadars(criteria)
.then(res=> this.core.SearchResults = res;
}
}