I was using VueJS in browser mode and am now trying to switch my code to a VueJS SPA and vue-router. I've been stuck for hours with a $refs not working anymore.
To interact with my Google Charts, I was using an absolute reference to the graph (this.$refs.villesChart) to get selected data like that:
computed: {
eventsprox() {
let eventsprox = {
select: () => {
var selection = "";
if (this.$refs.villesChart) selection = this.$refs.villesChart1.chartObject.getSelection();
if (selection.length) {
var row = selection0[0].row + 1;
this.code_commune = this.dataprox[row][4];
this.changerville(this.code_commune, this.dataprox[row][0]);
}
return false;
},
};
return eventsprox;
}
HTML code for graph:
<GChart type="BarChart" id="villesChart" ref="villesChart" :data="dataprox" :options="optionsprox" :events="eventsprox"/>
I don't know why, but in browser mode, this.$refs.villesChart is a component:
[1]: https://i.stack.imgur.com/xJ8pV.png
but now it is a proxy object, and lost its chartObject attribute:
[2]: https://i.stack.imgur.com/JyXrL.png
I'm really confused. Do you have an idea why?
And if I use the proxy object, then I get a Vue warning "Avoid app logic that relies on enumerating keys on a component instance" and it is not working in production environment.
Thanks a lot for your help!!
After hours of testing different solutions, I finally found a solution working with Vue3 and Vue-google-chart 1.1.0.
I got rid of "refs" and put the events definition and code in the data section of my Vue 3 app (instead of computed) and accessed the chart data through a component variable I used to populate it.
Here is my event code where this.dataprox is my data table for the chart:
eventsprox: {
'click': (e) => {
const barselect = parseInt(e.targetID.split('#')[2]) + 1;
this.code_commune = this.dataprox[barselect][4];
this.nom_commune = this.dataprox[barselect][0];
this.changerville(this.code_commune, this.nom_commune);
}
},
My Gchart html code:
<GChart type="AreaChart" :data="datag" :options="optionsg" :events="eventsprox"/>
I hope it can help!
Related
I am using Duet Date Picker in the Ionic 5/ Vue 3 application. The event listener for the duetChange is not working for me.
Here is my code snippet:
<duet-date-picker #duetChange="handleInput($event)"identifier="date" :localization.prop="localisation" direction="left"></duet-date-picker>
handleInput(e: any) {
console.log("e", e);
this.$emit("input", this.content);
}
I have even tried following listners:
v-on:duetChange="handleInput($event)"
v-on:change="handleInput($event)"
#change="handleInput($event)"
Is this the right way to add an event listener or am I missing something?
Here is the code sandbox link:
https://codesandbox.io/s/old-silence-1f0nx?file=/src/App.vue
TIA
I tried to use the duetDatePicker in a Vue CodeSandbox, the following works:
<duet-date-picker
#duetChange="handleInput"
identifier="date"
:localization.prop="localisation_uk"
>
Along with the above, my methods object contained the handleInput function declaration.
Check the App.vue file in the codesandbox for details.
I was able to get it to work the old fashion way...
onMounted(() => {
// Select the date picker component
const date = document.getElementById("date-picker");
// Listen for when date is selected
date.addEventListener("duetChange", function (e) {
console.log("selected date", e.detail.valueAsDate);
});
});
<duet-date-picker id="date-picker"
#duetChange="handleInput"
identifier="date"
:localization.prop="localisation_uk"
>
First of all I'm using Vue.js to access data of an API using axios and a proxy
I'm trying to access the property of an object nested in the last array of several other arrays but I'm kinda hitting a wall, here's the detail :
Global details
the property I'm trying to access
I've tried different ways but here's my latest try :
axios
.get(proxyurl + history_url, {
reqHeaders
})
.then((reponse) => {
console.log(reponse.data)
this.lastItem = reponse.data.data.history[history.length-1]
console.log(this.lastItem)
this.lastEvol = this.lastItem.price
console.log(this.lastEvol)
})
The issue here is that the answer to "console.log(this.lastItem)" is :
lastItem answer
The value of the properties are now different and incorrect.
Since it's showing "Proxy" as the root object name I thought that may be the issue but I'm not sure.
I've tried several other ways to access this property but only had errors.
Any help would be greatly appreciated.
history is undefined in the history.length expression. Try this:
.then((reponse) => {
const history = reponse.data.data.history;
console.log(reponse.data)
this.lastItem = history[history.length-1]
console.log(this.lastItem)
this.lastEvol = this.lastItem.price
console.log(this.lastEvol)
})
I am trying to paginate my table.
I have the full implementation of Angular Material Table with Pagination(https://material.angular.io/components/table/overview#pagination)
Since I am using Angularfire2 my dataSource is an Observable.
this.items = this.itemsCollection.valueChanges();
I read that I have to use
dataSource = new MatTableDataSource<Item>;
to create a working connection between table and paginator.
I populate the dataSource by
let subscription = this.items.subscribe(
newData => { this.dataSource.data = newData });
and update the dataSource's paginator by
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
where this.paginator is defined by
#ViewChild(MatPaginator) paginator: MatPaginator
like explained in Angular Material's components doc.
The paginator(mat-paginator) is working fine. However, my issue is that the table does not refresh and continues to show all values. Initial values to 'this.paginator' are also not passed to the table limit.
I found a known bug, but I am not sure if that applies to my problem...
Can anyone help me out?
Thank you in advanced!!
Update
I found an easy solution for my problem by using the Angular Pipe at mat-table. I added the slice pipe like this:
<mat-table #table [dataSource]="dataObservable | async | slice: a:b">
and in my data component I was listening to the change event of the HTML Element "mat-paginator"
(page)="changePage($event)"
In my component I can easily set the sliced data
a = 0;
b = this.limit;
changePage(ev) {
console.log( ev );
this.a = ev.pageIndex * ev.pageSize;
this.b = this.a + ev.pageSize;
console.log(this.a);
console.log(this.b);
}
I have a highmaps 'chart' and the only thing that I want is to redraw the whole map inside an external function. Let me explain better. The map draws itself immediatly when the page loads up but I fetch some data from an external service and set it to a variable. Then I would like to just redraw the chart so that the new data appears in the map itself. Below is my code.
<template>
<div>
<highmaps :options="chartOptions"></highmaps>
</div>
</template>
<script>
import axios from 'axios';
import HighCharts from 'vue-highcharts';
import json from '../map.json'
let regions = [];
export default {
data: function () {
return {
chartOptions: {
chart: {
map: json, // The map data is taken from the .json file imported above
},
map: {
/* hc-a2 is the specific code used, you can find all codes in the map.json file */
joinBy: ['hc-key', 'code'],
allAreas: false,
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
},
series: [
{
borderColor: '#a0451c',
cursor: 'pointer',
name: 'ERROR',
color: "red",
data: regions.map(function (code) {
return {code: code};
}),
}
],
}
},
created: function(){
let app = this;
/* Ajax call to get all parameters from database */
axios.get('http://localhost:8080/devices')
.then(function (response) {
region.push(response.parameter)
/* I would like to redraw the chart right here */
}).catch(function (error){
console.error("Download Devices ERROR: " + error);
})
}
}
</script>
As you can see I import my map and the regions variable is set to an empty array. Doing this results in the map having only the borders and no region is colored in red. After that there is the created:function() function that is used to make the ajax call and retrieve data. After that I just save the data pushing it into the array and then obviously nothing happens but I would like to redraw the map so that the newly imported data will be shown. Down here is the image of what I would like to create.
If you have any idea on how to implement a thing like this or just want to suggest a better way of handling the problem, please comment.
Thanks in advance for the help. Cheers!
After a few days without any answer I found some marginal help online and came to a pretty satisfying conclusion on this problem so I hope it can help someone else.
So the first thing I did was to understand how created and mounted were different in Vue.js. I used the keyword created at first when working on this project. Because of that, inside this function, I placed my ajax call that gave me data which I then loaded inside the 'chart' by using the .addSeries method of the chart itself.
To reference the chart itself I used this: let chart: this.$refs.highcharts.chart. This searches for the field refs in any of your components/html elements and links it to the variable. So in the html there was something like this:
<template>
<div>
<highmaps :options="chartOptions" ref="highcharts"></highmaps>
</div>
</template>
The real problem was that the chart didn't even start rendering while all this process was going on so I changed the created keyword with mounted which means that it executes all the code when all of the components are correctly mounted and so my chart would be already rendered.
To give you (maybe) a better idea of what I am talking about I will post some code down below
mounted: function(){
let errorRegions = [];
let chart = this.$refs.highcharts.chart;
axios.get('localhost:8080/foo').then(function(response)
{
/* Code to work on data */
response.forEach(function(device){
errorRegions.push(device);
}
chart.addSeries({
name: "ERROR",
color: "red",
data: errorRegions
}
/* ...Some more code... */
})
}
And this is the result (have been adding some more series in the same exact manner)
Really hoping I have been of help to someone else. Cheers!
I am designing an app in sencha touch2. I have a panel object in my JS file. I need to dynamically set the text/html for this component. The store for this component is defined at the application level. Following is the thing I worked out:
Ext.define('class_name',{
....
config : {
pnlObj : null,
...
}
initialize : function() {
this.config.pnlObj = Ext.create('Ext.Panel');
var store = Ext.data.Storemanager.lookup('some_store');
store.on('load',this.loadStore,this);
this.setItems([{
//some items here
{
flex : 2,
// id : 'somepnl',
config : this.config.pnlObj
}
}]);
},
loadStore : function(store, rec) {
var text = rec.get('text');
var panel = this.config.pnlObj;
// var panel = Ext.getCmp('somepanl');
panel.setHtml(text);
}
});
When I inspect the inspect the element using Firebug console, I can find the panel added there. But I am not able to set the html dynamically. no html text is set there. I tried adding it using panel.add() & panel.setItems() method which doesn't work. If I give an id to that panel(somepanel here) and try to access it using Ext.getCmp('smpanel') then in that case it works fine. I have found that using Ext.getCmp() is not a good practice and want to avoid it as it might somewhere break my code in the future.
I guess the way I am instantiating the panel object is creating some issue. Can someone suggest the best way of doing it?
The recommended way to manipulate your components in Sencha Touch 2 is using controller, through refs and control configs. For example, your panel has a config like this: xtype:'myPanel', then in your controller:
refs: {
myPanel: 'myPanel'
}
control:{
myPanel: {
on_an_event: 'set_html_for_my_panel'
}
}
Lastly, define your function:
set_html_for_my_panel: function()
{
this.getMyPanel().setHtml('my_updated_html');
}
P/S: Behind the scene, Sencha Touch 2 uses Ext.ComponentQuery for refs in controllers