We Keep Coding

event on button not working in vue-datatable

I'm using vue datatable, functionalities are working except callmethod() is not called on button click. When i click button no events are fired. Any Suggestions Please.
export default{
data(){
return{
columns: [
{label: 'name', field: 'name'},
{label: 'Link', representedAs: row => ` <button #click="callmethod(${row.id})"> </button>`, interpolate: true},
],
rows: [],
page: 1,
per_page: 10,
filter: '',
}
},
methods:{
callmethod()
{
console.log('function called');
},

EDIT: it looks like you're using vuejs-datatable actually. Still, there is only a presence of raw data and nothing like a callback there, so it should probably not be possible to do it there. Try to rather do it directly into your template somehow since nothing in the official documentation is talking about this.
Or maybe look another library that will allow you to do that. There are plenty and what you're trying to do may be easier with another package. The one you're currently using (vuejs-datatable) do only have 147 stars, so not the most popular. I'd recommend checking all the solutions available here: https://github.com/vuejs/awesome-vue#table
You can see the attached listeners like this, select the component from your vue devtools then check it's listeners in the console.
You're talking about Vuetify's v-data-table or another one? Because there is a lot of them around..
Also, from the official #data docs, we can see that it says
A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.
You should not handle any kind of #click events into data so far. Are you sure your library is intended to work this way ?

Query firebase realtime database where child has property

I'm trying to query my Firebase Realtime Database to find all games a user belongs to.
I have a list of games, each game has a property of players. Each child of players has a key of $uid, and within that {key: $uid, name: "joe"}
Is it possible to get all games this way? Or do I need to start keeping another index of players_games/$uid/$game?
I've tried firebase.database().ref('games').orderByChild('players').equalTo(token.uid), but this yields null
It looks like database.ref('games').orderByChild('players/${token.uid}') works, but then I'd need to give .read access to all of games, or do this server-side.

Your current data structure makes it easy to find all the users for a specific game. It does not however make it easy to find all the games for a specific user. To allow that, you'll want to add an addition data structure that inverts the information.
So that'd look something like this:
player_games: {
"XDYNyN8il6TDsM4LuttwDzNuytj1": {
"-M5vf...U5zK": true
},
"NxH14...mxY2": {
"-M5vf...U5zK": true
}
}
Also see:
Firebase query if child of child contains a value
Firebase Query Double Nested
I recommend you also study the Firebase documentation on structuring your database, specifically the section on avoiding nested data. By mixing entity types as you currently do, you'll likely run into problems with security, and scalability.
The most idiomatic way to model your many-to-many relationship in the Firebase database is with four top-level lists:
players: {
$playerId: { ... }
}
games: {
$gameId: { ... }
}
player_games: {
$playerId: {
$gameId: true
}
}
game_players: {
$gameId: {
$playerId: true
}
}
Also see:
Many to Many relationship in Firebase

Get user's events with Firebase (many to many relationship)

I'm a Front-End Developer and for the first-time, I'm using Firebase to build an application. I read some documentation/articles and watched this interesting video about foreign keys (many to many relationship): https://www.youtube.com/watch?v=ran_Ylug7AE&list=PLl-K7zZEsYLlP-k-RKFa7RyNPa9_wCH2s&index=2.
I'm trying to apply this approach to retrieve events for a specific user. Ideally, I want to get this information without requesting/paying for too much data. First, this is how I set-up the following database structure (see video):
{
users:
"abc": {
firstname: "Maxime",
...
},
"def": {
firstname: "John",
...
},
},
events: {
"eventAbc-": {
title: "Some great event",
...
},
"eventDef": {
title: "Another great event",
...
}
},
eventAttendees: {
"eventAbc": {
abc: true,
def: true,
},
"eventDef": {
abc: true,
}
}
}
To get user's events, I have the following which actually works:
getEvents(userId) {
const self = this;
const query = firebase.firestore().collection('eventAttendees');
var promises = [];
query.onSnapshot(function(snap) {
snap.docs.forEach(doc => {
const data = doc.data();
if (data[userId]) {
// user has been invited to this event
promises.push(self.getEvent(doc.id));
}
});
Promise.all(promises).then((results) => {
console.log("All events");
console.log(results);
});
});
}
getEvent(eventId) {
return new Promise((resolve) => {
const query = firebase.firestore()
.collection('events')
.doc(eventId);
query.onSnapshot(function(snap) {
resolve(snap.data());
});
});
}
getEvents('abc');
Questions
I don't think/know if I have the right and optimized approach? Any documentation/Github project I should look into as reference?
What does happen if 'abc' has been invited to 1 million events? I feel, I'm looping and need to handle pagination out of the box. Is there a better way?
Let's assume, each event has a lot of information (details). However, on the homepage, I just need to display main information (event title, event date). Where should I store that to avoid loading a lot of information.
Hopefully, there is someone who can find the time to reply to my questions.
Thanks.

You seem to be watching David's great video series Firebase for SQL developers, which was written for the Firebase Realtime Database. Since your code uses the Cloud Firestore API, I'd recommend switching over to Todd's Getting to know Cloud Firestore series, which contains similar information and much more, but then tailored towards Firestore.
What does happen if 'abc' has been invited to 1 million events?
No user is ever going to watch those million events. So don't load them. Think of how many items a user will realistically see, and then load those. Typically this will be one or a few screenfuls. If you think they may want to load more, allow them to load a new page. Search firebase and pagination to see many questions about that topic.
Let's assume, each event has a lot of information (details). However, on the homepage, I just need to display main information (event title, event date). Where should I store that to avoid loading a lot of information.
You should only load the data you need. If you need a subset of the data for each event in the initial list view, create a separate node or collection with just that information for each event. Yes, you're indeed duplicating data that way, but that is quite normal in NoSQL databases.

Thanks for taking the time to reply to my questions. Indeed, I like this video series and I'm looking forward to watch the one you've recommended which seems to be more recent.
I agree with you and definitely want to load only what's needed. At the moment, I don't have much datas so it's difficult for me to conceive/anticipate that. I should have probably taken advantage of .limit(10) or .startAt() in the function getEvents?
I'm not familiar with database in general and don't really know where I should have a subset of the data for each event? Is the following what you would call initial list view? For my example, is it the right place? If not, where would put that?
eventAttendees: {
"eventAbc": {
title: "Some great event",
eventDate: "",
moreKeyInformation: "",
abc: true,
def: true,
},
"eventDef": {
title: "Another great event",
eventDate: "",
moreKeyInformation: "",
abc: true,
}
}

Redux data structuring

I'm trying to build a complex fully-dynamic app with Redux. I mean my App has lots of dynamic-generated forms with generated fields-components on-the-fly. I want to store in my Redux-store visual data about my components too. But how should i do it without mixing real data with visual component data?
For example if i have structure like this
Store {
visual: {...deeply nested visual-data-tree...},
data: {...deeply-nested real-data-tree...}
}
It is hard to render component because i need to search visual data first, then react component "value" in two trees.
But if have a structure similar to this:
Store {
form {
visual: {...form visual data...},
data: {
//Ok here the form "data" - widgets. Or it must to be visual? :)
widget1 {
visual: {type:"ComboBox", opened: true},
data: 1
}
}
}
}
You see the problem, now i have visual data inside real data of Form widget.
(form - data - widget1 - visual)
Visual data inside the real data is out of the concept.
How do you guys solve same problems of mixing data?
Really sorry for my poor english. I hope i clearly explained the problem.

Isn't the distinction superficial? I think a more important rule is that the data in the state should be normalized. For example, if you have Combobox widget letting you choose users, your data shape better be
{
chosenUserId: 10, // Good!
users: {
10: { name: 'Alice' }
}
rather than
{
chosenUser: { name: 'Alice' }, // Bad!
users: {
10: { name: 'Alice' }
}
If the data is duplicated in the state tree, it's hard to update it correctly and avoid inconsistencies.
As long as you keep the data normalized, I see no real need to divide visual and data. You might want to have top-level entity cache that looks like a database (e.g. entities which includes users, posts, or whatever data objects your app uses), but other than that, go with whatever state shape feels most comfortable when retrieving the relevant state.

Sails.Js - How I do pagination in sails.Js

I want to create paginated table using sails.js, mongodb and waterline-ORM.
Is there a any specific way to do pagination in sails.js?

http://sailsjs.org/#/documentation/concepts/ORM/Querylanguage.html
Model.find().paginate({page: 2, limit: 10});
Model.find({ where: { name: 'foo' }, limit: 10, skip: 10 });
If you want the pagination to work asynchronously, its very easy to do with JQUERY $$.getJSON and on the server res.json();
Theres a lot of info in waterline and sails docs.

There is also another way.
if you want to fetch data from the front-end, and have turned blueprint on, you can also try:
http://yourDomain.com/ModelName?skip=10&limit=10
Reference:
1.officer site: http://sailsjs.org/#/documentation/reference/blueprint-api/Find.html

You could build a functional paginator with built-in skip & limit query parameters for blueprint routes:
/api/todos?skip=10&limit=10
With this option, you could have dynamically sized page size according to various device sizes - this option you would provide with limit, which is basically your page size. Multiply (page size - 1) by current page number - voila you've got your skip parameter.
As to how to get the number of all items, I haven't found a built-in way to do it, so I've written a little helper middleware (https://github.com/xtrinch/sails-pagination-middleware) to return the total count in the response JSON this way:
{
"results": [
{
/* result here */
},
{
/* another result here */
}
],
"totalCount": 80
}
All you need to do is install the middleware via npm and add it to your middlewares in http.js.
If you need a fully functional example, I've also got an example to-do app with this sort of pagination on github: https://github.com/xtrinch/vue-sails-todo. It's written with vue, but you should get the idea either case.
Note that this answer requires sails 1.x.

I think you can also do it with io:
io.socket.get('/thing', {limit: 30, skip: 30*pageNum}, function(things, jwr) { /*...*/ })