My Vue component has a method setQuestions(questionpack). As you can see, there is an argument called questionpack.
In my component and before export default {...} there are several imports like
<script>
import Cars from "./../questionsCars.js"; // Content: var Cars = { questions: { ... } }
import Bikes from "./../questionsBikes.js";
import Trucks from "./../questionsTrucks.js";
...
export default {
...
}
</script>
This static code works well:
setQuestions() {
this.questions = {
...Cars.questions,
...Cars.questionsAppendOnSingle,
};
}
But if I try to access this Cars object by variable value like setQuestions('Cars'), it won't work:
setQuestions(questionpack) {
console.log("QP: " + questionpack); // Outputs 'Cars' as aspected
this.questions = {
...eval(questionpack).questions,
...eval(questionpack).AppendOnSingle,
};
}
It spits this error message:
vendor.js:1108 [Vue warn]: Error in created hook: "ReferenceError:
Cars is not defined"
What's the trick here?
Related
I have a property passed from it's parent component. The props works perfectly in template (in v-for), but can't access it in methods from script:
My codes from the script :
props: ['singleData'],
created() {
console.log(this.singleData)
},
What I am getting in console is :
proxy {}
[[Handler]]: Object
[[Target]]: Object
[[IsRevoked]]: false
From parent component :
<UpdateModal v-model="editDialog" :singleData="singleData" />
Form script :
export default {
setup() {
return {
singleData: ref({}),
}
},
methods: {
editRow(branch_row) {
this.editDialog = true
this.singleData = branch_row // getting from table row
appended in the template
},
}
}
I want to use an external JS function into a vue file.
Js file contains the method:
let calculateDiscount = {
PriceAfterDiscount(price, discountPercentage) {
const discountAmount = (discountPercentage * price) / 100;
return price - discountAmount;
}
};
export default calculateDiscount;
Vue file
<template>
<div v-for="product in product_data" :key="product.id">
<h4> ${{ Discount(product.price, product.sale) }}</h4>
</div>
</template>
<script>
import CalculateDiscount from "#/utilities/CalculateDiscount"; //js file containing the method
name: "ShowProduct",
methods: {
Discount(){
CalculateDiscount.PriceAfterDiscount();
}
}
</script>
I far I guess I can't import the function in method property in the right manner. Can anyone help me? Thanks in advance.
You need to update calculateDiscount object like:
let calculateDiscount = {
PriceAfterDiscount: (price, discountPercentage) => {
const discountAmount = (discountPercentage * price) / 100;
return price - discountAmount;
}
};
and then CalculateDiscount.PriceAfterDiscount(); should work fine.
In the template, you had called Discount function with two params like:
{{Discount(product.price,product.sale)}}
but in actual code you had passed nothing:
methods: {
Discount() {
calculateDiscount.PriceAfterDiscount();
}
}
Also, you have passed nothing to calculateDiscount.PriceAfterDiscount(). You need the pass the values from template to this and also return the result, otherwise it will never print nothing in UI:
methods: {
Discount(price, sale) {
return calculateDiscount.PriceAfterDiscount(price, sale);
}
}
JavaScript modules work as namespaces and don't need additional object literal or class to be wrapped around exports.
PriceAfterDiscount doesn't rely on calculateDiscount members and doesn't need to be defined as a part of it.
It can be:
export function PriceAfterDiscount(price, discountPercentage) {
const discountAmount = (discountPercentage * price) / 100;
return price - discountAmount;
}
};
And imported like:
import { PriceAfterDiscount } from "#/utilities/CalculateDiscount";
PriceAfterDiscount(...);
Or if it needs a namespace:
import * as calculateDiscount from "#/utilities/CalculateDiscount";
calculateDiscount.PriceAfterDiscount(...);
I've got a component that I want to update when a person's name changes by emitting an event. My problem is the code doesn't compile because of an error. This is my code
ApplicationFormComponent
#Output() nameChange = new EventEmitter();
closeAccordion(isComplete: string, accordionToClose: string, accordion: NgbAccordion) {
if (accordionToClose === 'personal-details-panel') {
this.applicationStatusFlags.personalDetailsStatus = (isComplete === 'true');
this.nameChange.emit({ personId: this.personId });
}
}
ApplicationFormComponent.html
<name-display
[personId]="personId"
[placeHolderText]="'Hello'"
(nameChange)="update($event)">
</name-display>
NameDisplayComponent
import { Component, Input, OnChanges, SimpleChanges } from '#angular/core';
import { PersonService } from "../../../service/person.service";
#Component({
selector: 'name-display',
templateUrl: './NameDisplay.component.html',
providers: [PersonService]
})
export class NameDisplayComponent implements OnChanges {
constructor(private readonly personService: PersonService) { }
#Input() personId;
#Input() placeHolderText: string = "";
forename: string = "";
ngOnChanges(changes: SimpleChanges): void {
if (changes["personId"]) {
this.personService.getPersonDetails(this.personId).subscribe((res: IPersonDetails) => {
this.forename = res.forenames;
});
}
};
update(personId: number) {
alert("update name");
this.personService.getPersonDetails(personId).subscribe((res: IPersonDetails) => {
this.forename = res.forenames;
});
}
}
My problem is basically when I use angular cli with the command ng server --aot, it doesn't compile because of this error:
ERROR in src\app\component\ApplicationForm\ApplicationForm.component.html(42,9): : Property 'update' does not exist on type 'ApplicationFormComponent'.
I've written a similar component that uses an event emitter which doesn't have this problem, so I'm stuck with how to fix the error.
Any ideas?
It is because you are passing $event to method.
(nameChange)="update($event)"
But it accepts number.
update(personId: number) {
alert("update name");
}
Please change the method as below.
update(event:any) {
const personId = event as number
alert("update name");
}
I am trying to implements some statistics in my develepping platform and I try to use ngx-charts to display them. However I get an error and I can't figure out why.
I am using storedProcedures for MySQL statistics which I call from Java Restful Backend and return them in Angular 5 front-end. The returned table has the following two fields: Date and number of incidents per day. So the table returned by the backend has those two columns.
My code for the component rendering the chart is the following:
import {Component, OnInit} from '#angular/core';
import {StatisticsService} from '../../statistics.service';
class Data {
private _name: string;
private _value: number;
get name(): string {
return this._name;
}
set name(value: string) {
this._name = value;
}
get value(): number {
return this._value;
}
set value(value: number) {
this._value = value;
}
}
#Component({
selector: 'app-daily-incidents-statistics',
templateUrl: './daily-incidents-statistics.component.html',
styleUrls: ['./daily-incidents-statistics.component.css']
})
export class DailyIncidentsStatisticsComponent implements OnInit {
view: any[] = [700, 400];
data: any[] = [];
// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = false;
showXAxisLabel = true;
xAxisLabel = 'Ημέρα';
showYAxisLabel = true;
yAxisLabel = 'Αρ. Περιστατικών';
constructor(private statisticsService: StatisticsService) {
// Object.assign(this, { single })
// Object.assign(this, { data } );
}
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
onSelect(event) {
console.log(event);
}
async ngOnInit() {
console.log('NG ON INIT EXECUTION');
await this.getIncidentsByDay();
}
getIncidentsByDay() {
this.statisticsService.getIncidentsByDay()
.subscribe(
(results) => {
let temp = new Data();
for (let i in results) {
console.log(results[i][0] + '>>=====>> ' + results[i][1]);
temp.name = results[i][0];
temp.value = results[i][1];
this.data.push(temp);
}
const test = this.data;
// for (let i = 0; i < this.data.length; i++) {
// console.log('wtf: ' + this.data[i][0] + '::::' + this.data[i][1]);
// }
// console.log(results);
// console.log(JSON.stringify(results));
// Object.assign(this, {test});
}
);
}
}
However when I run the above code I get in JavaScript console the error:
ERROR TypeError: Object(...) is not a function
at BarVerticalComponent../src/common/base-chart.component.ts.BaseChartComponent.bindWindowResizeEvent (index.js:7818)
at BarVerticalComponent../src/common/base-chart.component.ts.BaseChartComponent.ngAfterViewInit (index.js:7730)
at callProviderLifecycles (core.js:12689)
at callElementProvidersLifecycles (core.js:12656)
at callLifecycleHooksChildrenFirst (core.js:12639)
at checkAndUpdateView (core.js:13794)
at callViewAction (core.js:14136)
at execComponentViewsAction (core.js:14068)
at checkAndUpdateView (core.js:13791)
at callViewAction (core.js:14136)
My Html Template File:
<div>
lalalal <br/>
ante pali... <br/>
kala ti na pw... <br/>
Gamiete pali... <br/>
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical>
</div>
While the service for retreiving the values is:
import {Injectable} from '#angular/core';
import {HttpClient} from '#angular/common/http';
import {catchError} from 'rxjs/operators';
import {ErrorHandler} from '../shared/lib/error-handler';
import {Observable} from 'rxjs/Observable';
#Injectable()
export class StatisticsService {
constructor(private http: HttpClient) {
}
public getIncidentsByDay(): Observable<any> {
console.log("FEtching Incidents All By Day");
const url = 'statistics/incidents/day';
return this.http.get(url)
.pipe(catchError(ErrorHandler.handleError));
}
}
What am I doing wrong?
I am using Angular version 5.3 and ngx-charts 8.0 which is compatible with Angular 6 and not Angular 5. I installed ngx-charts version 7.4 and everything works fine.
I fixed the problem for me by downgrading to version 7.3.0
yarn add #swimlane/ngx-charts#7.3.0
I think I see the same with ngx-charts-bar-horizontal, whereas before this was not the case. The documentation page seems to be broken at the moment as well, so I assume the software has recently been updated in a broken way.
If you really need to use the 8.0 version, you can upgrade to angular 6 to solve the problem. Here is how you can do the upgrade from v5 to v6 https://stackoverflow.com/a/49474334
You can also think that the documention page is broken by now but ou can find it here https://swimlane.gitbook.io/ngx-charts/v/docs-test/installing
I am writing a simple Mithril component, given below is the code
var m = require("mithril")
var MyComponent = {
view() {
return <button>Hello world!</button>;
}
};
export default MyComponent;
My problem is that in this scenario I am not using m as required, however when I remove this the app does not run, I get the following error
Uncaught ReferenceError: m is not defined(…)
It complains when you remove the m = require("mithril") line because when the JSX is transformed it becomes invocations of m().
var m = require("mithril")
var MyComponent = {
view() {
return <button>Hello world!</button>;
}
};
export default MyComponent;
becomes
var m = require("mithril");
var MyComponent = {
view: function view() {
return m(
"button",
null,
"Hello world!"
);
}
};
exports.default = MyComponent;
You can see the JSX transform live on the babel REPL