I have just started learning Vuejs. After attempting to follow https://alligator.io/vuejs/vuefire-firebase/ (modifying data section at the bottom of the page), I tried to update information on Firebase and I get the error:
cannot read property child of undefined. How can I fix this?
<script>
import {linesRef} from '../../firebase'
export default {
firebase: {
lines: linesRef
},
data() {
return {
status: 'available'
}
},
methods: {
hold(key, e) {
if (confirm("Hold the line?")) {
function updateStatus(line, sold) {
linesRef.lines.child(line['.key'])
.child('status').set(sold)
}
e.currentTarget.style.backgroundColor = "yellow"
}
else{
e.currentTarget.style.backgroundColor = "transparent"
}
}
}
}
</script>
You have to write linesRef.child(line['.key']) to access the document you want
Related
I have a modal window in Angular 4 that works fine but if the user clicks on the background / parent page the modal is closed.
I have found some solutions that suggest using backdrop='static' and keyboard=false when opening the modal but our modal uses a local Dialog class with a BehaviorSubject object so is opened using the .next method. I've also tried setting these attributes using div config but to no avail.
Therefore I'm looking for another solution, maybe using CSS or another setting / attribute that can be directly applied to the parent page or modal HTML.
See below for some of the relevant code.
dialog.component.ts:
constructor(private location: PlatformLocation,
private _dialog: DialogService,
private router: Router) { }
open() {
this.showDialog = true;
const body = document.body;
body.classList.add('cell-modal-open');
}
close() {
this.dialog = undefined;
}
private handleDialog(d: Dialog) {
if (!d) {
this.close();
} else if (d.template) {
if (this.showDialog) {
this.close();
}
this.dialog = d;
this.open();
}
}
ngOnInit() {
this.subscription = this
._dialog
.getDialog()
.subscribe({
next: (d) => { this.handleDialog(d); console.log('subscribed dialog') },
error: (err) => this.handleDialogError(err)
});
this.initialiseRoutingEventListeners();
}
dialog.service.ts
private d: Dialog = { template: null, size: DialogSizeEnum.XLarge };
private dialogSubject = new BehaviorSubject<Dialog>({ template: null, size: DialogSizeEnum.XLarge });
constructor() { }
showDialog(template: TemplateRef<any>, size = DialogSizeEnum.XLarge, requiresAction = false) {
Object.assign(this.d, { template: template, size: size, requiresAction: requiresAction });
if (this.d !== null) {
this.dialogSubject.next(this.d);
}
}
getDialog(): BehaviorSubject<Dialog> {
return this.dialogSubject;
}
clear() {
this.dialogSubject.next(null);
}
Any suggested approaches are welcome!
Added flag to the close() method and adding condition to only set to undefined if true (i.e. from a valid location).
I trying to pass data that is fetched from the server to a popup.I tried doing something like this but its not working.Please help-
{
path:'/merchant/:id',
beforeEnter: function (routeTo, routeFrom, resolve, reject) {
console.log(routeTo.params.id);
Meteor.call('getOne',routeTo.params.id,(error,result) => {
if (result) {
resolve(
{
popup: {
el:document.querySelector('#sample-popup')
}
},
// Custom template context
{
context: {
users: result,
},
}
)
}
});
} ,
},
According to the docs, you use resolve callback wrong !
You can also read this understand how to achieve this
I am having difficulties with meteor 1.6. First, I have created a database instance and tried to subscribe in the client. through form, I am able to input the data into my database. But could not retrieve it through the subscribe. can anybody tell me what wrong have I done in my code?
import { Template } from "meteor/templating";
import { Notes } from "../lib/collection";
import { Meteor } from "meteor/meteor";
// import { ReactiveDict } from 'meteor/reactive-dict';
import "./main.html";
/*
Template.body.onCreated(function bodyOnCreated() {
this.state = new ReactiveDict();
Meteor.subscribe("db1");
}); */
Template.Display.helpers({
notes() {
Meteor.subscribe("db1");
return Meteor.call('data');
}
});
Template.body.events({
"click .delete": function() {
Notes.remove(this._id);
},
"submit .formSubmit": function(event) {
event.preventDefault();
let target = event.target;
let name = target.name.value;
Meteor.call("inputs", name);
target.name.value = "";
return false;
},
"click .userDetail": function() {
if (confirm("Delete the user Detail ?")) {
Notes.remove(this._id);
}
}
});
here is the code for publication :
import { Mongo } from 'meteor/mongo';
export const Notes = new Mongo.Collection('notes');
Meteor.methods({
inputs:(name)=> {
if (!Meteor.user()) {
throw Meteor.Error("Logged in");
}
Notes.insert({
name: name,
createdAt: new Date()
});
},
data:()=>{
return Notes.find({});
}
});
Meteor.subscribe("notes"); should be in Template.body.onCreated lifycycle method. you need to write a
publish code seperately and not inside the Meteor.method. see below format,
Meteor.publish('notes', function tasksPublication() {
return Notes.find({});
});
Inside the helper just call the subscribed Collection a below,
Template.Display.helpers({
notes() {
return Notes.find({});
}
});
**NOTE: ** Never use Meteor.call inside the helper method. helpers are reactive and real time.
How to set the path for vuefire like below
export default {
firebase: {
classlist: db.ref('chapter/1'), // here 1 need to be taken from data
// like this db.ref('chapter/' + this.chapterid),
},
data:{
chapterid:''
},
mounted:{
// getchapterid here
this.chapterid=getChapterId()
}
}
It does not work it returns error undefined chapterid , is there anyway to do this ?
Use function syntax for firebase, otherwise this is not bound to vue instance.
firebase() {
return {
classlist: db.ref('chapter/' + this.chapterid)
}
},
Source : https://github.com/vuejs/vuefire/issues/90
I would like to modify the angularFire code below (taken from the docs:
https://www.firebase.com/docs/web/libraries/angular/guide.html#section-angular-authentication)
so that if the user is not logged in it will also log the user in before page loads and the user data will be ready to use straight away.
This is the original:
resolve: {
"currentUser": ["simpleLogin", function(simpleLogin) {
return simpleLogin.$getCurrentUser();
}]
}
and this is what I have so far:
resolve: {
"currentUser": ["simpleLogin", function(simpleLogin) {
return simpleLogin.$getCurrentUser();
}],
"loginUser": ["simpleLogin", function(simpleLogin) {
return simpleLogin.$login("anonymous", {rememberMe : true} );
}]
}
but this will cause the user to be logged in each time thus resetting the ID (I think?). How do I do it conditionally so that they are only logged in if not already?
Rather than utilizing two resolve methods, I'd just chain them together. Since $login returns a promise, this is pretty smooth sailing:
resolve: {
"currentUser": ["simpleLogin", function(simpleLogin) {
return simpleLogin.$getCurrentUser().then(function(user) {
if( user === null ) {
// log in now...
return simpleLogin.$login('anonymous', {rememberMe: true});
}
else {
// logged in!
return user;
}
});
}]
}