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
Related
Is there a way to detect change to modelValue in a custom component? I want to push the change to a wysiwyg editor.
I tried watching modelValue but emitting update for modelValue triggered that watch, which created circular data flow.
Code:
export default {
props: ['modelValue'],
watch: {
modelValue (val) {
this.editor.editor.loadHTML(val)
}
},
mounted () {
this.editor.editor.loadHTML(val)
this.editor.addEventListener('trix-change',
(event) => this.$emit('update:modelValue', event.target.value))
}
}
<TextEditor v-model="someHtml"></TextEditor>
In VueJS v3, the event name for custom v-model handling changed to 'update:modelValue'.
You can listen to these events like this: v-on:update:modelValue="handler"
For a more complete example, lets assume you have a Toggle component with these properties/methods:
...
props: {
modelValue: Boolean,
},
data() {
return {
toggleState: false,
};
},
methods: {
toggle() {
this.toggleState = !this.toggleState;
this.$emit('update:modelValue', this.toggleState);
}
}
...
You can use that Toggle component:
<Toggle v-model="someProperty" v-on:update:modelValue="myMethodForTheEvent"/>
As a side note, you could also v-model on a computed property with a setter; allowing you to internalise your state changes without using the update:modelValue event. In this example, it assumes you v-model="customProperty" on your custom Toggle component.
computed: {
customProperty: {
get() {
return this.internalProperty;
},
set(v) {
this.internalProperty = v;
console.log("This runs when the custom component 'updates' the v-model value.");
},
}
},
I had the same problem and solved it using a slight tweak to the way you call the watch function:
setup(props) {
watch(() => props.modelValue, (newValue) => {
// do something
})
}
Hence, the important thing is to add () => props.modelValue instead of just putting props.modelValue as the first argument of the watch function.
try that:
watch: {
...
modelValue: function(val) {
console.log('!!! model value changed ', val);
},
...
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 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
I have the following structure:
{
id: 23423-dsfsdf-32423,
name: Proj1,
services: [
{
id:sdfs-24423-sdf,
name:P1_Service1,
products:[{},{},{}]
},
{
id:sdfs-24jhh-sdf,
name:P1_Service2,
products:[{},{},{}]
},
{
id:sdfs-2jnbn3-sdf,
name:P1_Service3,
products:[{},{},{}]
}
]
},
{
id: 23423-cxcvx-32423,
name: Proj2,
services: [
{
id:sdfs-xvxcv-sdf,
name:P2_Service1,
characteristics:[{},{},{}]
},
{
id:sdfs-xvwqw-sdf,
name:P2_Service2,
characteristics:[{},{},{}]
},
{
id:sdfs-erdfd-sdf,
name:P2_Service3,
characteristics:[{},{},{}]
}
]
}
I have no problem creating a form this schema an insert form with quickForm.
But I cant figure out (and tried to read every tutorial and instruction and nothing worked) how to create an update form with all fields filled and (need to expand and fill the services and the characteristics arrays also:
of course, as i said, in update i need the services and characteristics to expend to the right size with all the fields.
But if i could understand how to fill the form fields i could understand myself how to expend the arrays...
i've tried:
{{> quickForm collection="Projects" id="updateProjectForm" collection="Projects" type="method" class="update-project-form" doc=project }}
with:
import SimpleSchema from 'simpl-schema';
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
// Attaching the subscription to the template so we can reuse it
Template.ProjectSingle.onCreated(function(){
var self = this;
self.autorun(function(){
var id = FlowRouter.getParam('id');
self.subscribe('projectSingle', id);
});
});
Template.ProjectSingle.helpers({
project: ()=> {
var id = FlowRouter.getParam('id');
console.log(Projects.findOne({_id: id}));
return Projects.findOne({_id: id});
}
});
I can't even see the console.log() printing.
This solution at list didn't crash the meteor server... everything else i've tried crashed the server on many errors
Maybe i need to mention that i'm using partials so maybe there is a problem with the JS files but i don't think so as the onCreated method is being read.
10x.
EDIT:
I've removed the partial for the update template and it is now in the root Template with its own JS with the method:
projectDoc: ()=> {
var id = FlowRouter.getParam('id');
console.log("Update: " + Projects.findOne({_id: id}));
return Projects.findOne({_id: id});
}
Now i can see this method is being called but for some reason it is being called twice. First with the correct data and then getting undefined so i've still not getting the fields showing anything but if i could find why it is being called twice i will solve the first level form (no services and so on)
Solved it (Not sure this is the best way as i'm still having two calls to the method but this is working for now:
projectDoc: ()=> {
var id = FlowRouter.getParam('id');
if(Projects.findOne({_id: id}) != null){
console.log(Projects.findOne({_id: id}));
thisProject = Projects.findOne({_id: id});
return Projects.findOne({_id: id});
} else {
return thisProject;
}
}
This seems like a basic flow, but I am unable to find examples.
I have this custom component that loads a list of items from a backend service.
I tried writing this async code below, but I get 'Unexpected token' error in the browser at let.
import {customElement, bindable, inject} from 'aurelia-framework';
import {ItemsService} from 'Services/ItemsService';
#customElement('itemslist')
export class ItemsList {
static inject() { return [Element, ItemsService]; }
constructor(element, itemsService) {
this.element = element;
this.itemsService = itemsService;
}
async attached() {
let this.items = await this.itemsService.getItemList();
}
}
How should I do async work to load items and set it on my View-Model items property?
Thanks
let keyword is used to declare local variables, you can't use it before this. Just remove let. Declare your items property in constructor or with ES7 syntax.
Babel's async/await transformer must be enabled- Change this:
config.js
"babelOptions": {
"optional": [
"es7.decorators",
"es7.classProperties"
]
},
To this:
"babelOptions": {
"optional": [
"es7.decorators",
"es7.classProperties",
"es7.asyncFunctions"
]
},
Or this:
"babelOptions": {
"stage": 0
"optional": ["runtime"]
},