Can anyone help me why I cannot be able to change the data value within a method?
<head>
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
</head>
<body>
<script>
var app = new Vue({
data() {
return {
name: ""
}
},
methods: {
firebase: function() {
var docRef = db.doc("test/testdoc");
docRef.get().then(function(doc) {
this.name = doc.data().name; //this one not working
console.log(doc.data().name); //just to test wether I can get data from Firestore
})
}
})
</script>
</body>
"console.log" is working and I can get the value from Firestore, but why the value of "name" doesn't change?
this will not be referring to the Vue instance anymore in function(){}, because this kind of function declaration bind its own this.
So you can save this into another variable 1st, and use it in function(){}.
methods: {
firebase: function() {
var docRef = db.doc("test/testdoc");
var _this = this; // save it in a variable for usage inside function
docRef.get().then(function(doc) {
_this.name = doc.data().name; //this one not working
console.log(doc.data().name); //just to test wether I can get data from Firestore
})
}
}
Alternatively, you could use arrow function like ()=>{}. Arrow function doesn't bind its own this. But it's not supported in some browsers yet.
Related
Following code, is a very simple Firebase - VueJS app, (codeSandBox demo)
app.vue
<template>
<div class="container">
<!-- Adding Quote -->
<add-quote/>
<!-- Display Quotes -->
<quote-list/>
</div>
</template>
<script>
import addQuote from "./components/AddQuote.vue";
import quoteList from "./components/QuoteList.vue";
export default {
components: {
addQuote,
quoteList
},
methods: {
get_allQuotes: function() {
// var vm = this;
var localArr = [];
quotesRef
.once("value", function(snapshot) {
snapshot.forEach(function(snap) {
localArr.push({
key: snap.key,
category: snap.val().category,
quoteTxt: snap.val().quoteTxt
});
});
})
.then(data => {
this.$store.commit("set_allQuotes", localArr);
});
}
},
mounted() {
this.get_allQuotes();
console.log("App: mounted fired");
}
};
</script>
store.js(vuex store)
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
quotesList: []
},
getters: {
get_quotesList(state) {
return state.quotesList;
}
},
mutations: {
set_allQuotes(state, value) {
state.quotesList = value;
}
}
});
AddQuote.vue
<template>
<div class="row quote-edit-wrapper">
<div class="col-xs-6">
<textarea v-model.lazy="newQuoteTxt"
rows="4"
cols="50"></textarea>
<button #click="addQuote">Add Quote</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
newQuoteTxt: '',
}
},
computed: {
allQuotes() {
return this.$store.getters.get_quotesList;
},
newQuoteIdx() {
var localArr = [...this.allQuotes]
if(localArr.length > 0) {
var highestKEY, currKEY
localArr.forEach((element, idx) => {
currKEY = parseInt(element.key)
if(idx == 0) {
highestKEY = currKEY
} else {
if(highestKEY < currKEY) {
highestKEY = currKEY
}
}
})
return highestKEY + 1
} else {
return 1
}
}
},
methods: {
// ADD new Quote in DB
addQuote: function() {
var vm = this
var localArr = [...this.allQuotes]
//1. First attach 'value' event listener,
// Snapshot will contain data from that ref
// when any child node is added/updated/delete
quotesRef.on('value', function (snapshot) {
snapshot.forEach(function(snap) {
var itemExists = localArr.some(function (item, idx) {
return item.key == snap.key
})
// If newly added item doesn't yet exists then add to local array
if (!(itemExists)) {
localArr.push({
key: snap.key,
category: snap.val().category,
quoteTxt: snap.val().quoteTxt })
vm.$store.commit('set_allQuotes', localArr)
}
})
})
//2. Second set/create a new quotes in Firebase,
// When this quote gets added in Firebase,
// value event (attached earlier) gets fired
// with
var newQuoteRef = quotesRef.child(this.newQuoteIdx)
newQuoteRef.set({
category: 'motivation',
quoteTxt: this.newQuoteTxt
})
}
}
}
</script>
quoteList.vue
<template>
<div class="row">
<div class="col-xs-12 quotes-list-wrapper">
<template v-for="(quote,idx) in allQuotes">
<!-- Quote block -->
<div class="quote-block-item">
<p class="quote-txt"> {{quote.quoteTxt}} </p>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
computed: {
allQuotes() {
return this.$store.getters.get_quotesList;
}
}
}
</script>
Note: The main code of concern is of addQuote.vue
User enter newQuoteTxt that gets added to Firebase (addQuote()) as a quote item under quotesRef. As soon as quote is added (on firebase), Firebase client side SDK's value event fires, and adds the new quote (via callback) to localArray (allQuotes). VueJS then updates the DOM with newly added Quote.
The addQuote() method works in the following manner:
First, attach a callback/listener to 'value' event on quotesRef
quotesRef.on('value', function (snapshot) {
....
})
Next, A firebase ref (child of quotesRef) is created with a ID this.newQuoteIdx
var newQuoteRef = quotesRef.child(this.newQuoteIdx)
Then set() is called (on this newly created Ref) adding newquote to firebase RealTime DB.
value event gets triggered (attached from step 1) and listener /callback is called.
The callback looks for this new quote's key in existing list of items by matching keys of localArr and snap.key, if not found, adds the newly quote to localArr. localArr commits to a vuex store.
`vm.$store.commit('set_allQuotes', localArr)`
VueX then updates all subscriber component of this array. VueJS then adds the new quote to the existing list of quotes (updates the DOM)
While debugging the addQuote method, the problem I notice, the execution/flow of script (via F8 in chrome debugger) first steps into the listener/callback attached to value event before the code newQuoteRef.set({ ... }) that adds new quote (on firebase), which in turn will cause 'value' event to trigger.
I am not sure why this occurs. Can anybuddy explain why the listener/callback is called before the quotes is created.
Are child nodes (of QuotesRef) are cached at clientside such that 'value' fires even before new quote is added.
Thanks
If I correctly understand your question (Your code is not extremely easy to follow! :-)) it is the normal behaviour. As explained in the documentation:
The value event will trigger once with the initial data stored at
this location, and then trigger again each time the data
changes.
Your sandbox demo does not actually shows how the app works, but normally you should not set-up the listener in the method that saves a new node to the database. These two things should be decoupled.
One common approach is to set the listener in the created hook of a component (see https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks and https://v2.vuejs.org/v2/api/#created) and then in your addQuote method you just write to the database. As soon as you write, the listener will be fired.
As title
Vuefire can auto get data from firebase database, but it needs some loading time.
So I want to display some css animation before data being fetched, is there any event can I $watch when it successed
The readyCallback approach in the other answer didn't work for me. I got an error document.onSnapshot is not a function.
Instead, I used the binding approach to set a flag when loading is complete.
<script>
// ...
export default {
data() {
return {
data: [],
loaded: false,
}
},
mounted() {
this.$bind('data', firebase.firestore().collection('someDocRef'))
.then(() => this.loaded = true);
},
}
</script>
Then my template can have conditionally-rendered loading screens:
<template>
<template v-if="!loaded">
<p>Loading...</p>
</template>
<template v-if="loaded">
<!-- Display data here -->
</template>
</template>
You can do this multiple ways.
Vuefire has readyCallback out of the box which is callback called when the data is fetched (ready).
Here it is:
var vm = new Vue({
el: '#demo',
data: function() {
return {
loaded: false
}
}
firebase: {
// simple syntax, bind as an array by default
anArray: db.ref('url/to/my/collection'),
// can also bind to a query
// anArray: db.ref('url/to/my/collection').limitToLast(25)
// full syntax
anObject: {
source: db.ref('url/to/my/object'),
// optionally bind as an object
asObject: true,
// optionally provide the cancelCallback
cancelCallback: function () {},
// this is called once the data has been retrieved from firebase
readyCallback: function () {
this.loaded = true // NOTE THIS LINE
}
}
}
})
I'm trying to include the vis.js library into my Meteor application. I have the library included and I'm rendering the page without errors, however, the vis.js timeline is rendering with only horizontal lines, and no objects.
I am definitely populating my dataset as I have confirmed it via console.
Here is my code.
Template.events_timeline.rendered = function () {
drawTimeline();
};
function drawTimeline(){
var container = document.getElementById('timeline');
var event = Events.find();
if (event.count() === 0) {
console.log('found no events');
return;
}
data = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
var i = 1;
event.forEach(function (ev) {
data.add([{id: i, content: ev.content, start: ev.startDate, end: ev.endDate}]);
i++;
});
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, data, options);
}
My template is as follows. Very basic.
<template name="events_timeline">
<div id="timeline"></div>
</template>
Result.
http://i.imgur.com/k2HyQb5.jpg
I was able to get the graph to render with data on it's own with the above code and some changes to the router, but I cannot seem to get the chart to work when embedding the chart template in, for example, a layout template.
The following router changes renders the chart correctly, with data from the Events collection.
this.route('events_timeline', {
path: '/timeline',
waitOn: function() {
return Meteor.subscribe('events');
},
notFoundTemplate:'data_not_found',
action: function() {
if(this.ready()) {
this.setLayout('events_timeline');
this.render();
} else {
this.setLayout('loading');
this.render('loading');
}
}
});
If I replace ...
this.setLayout('events_timeline');
... With ...
this.setLayout('layout');
... Then I still get the blank chart.
I think I'm missing something with how to correctly waitOn the data for a specific template.
UPDATED
NOW I try to do this in my app (thx to Akshat)
//common
LANG = 'ru';
Dictionary = new Meteor.Collection("dictionary");
//if server
Meteor.startup(function () {
if (Dictionary.find().count() === 0) {
// code to fill the Dictionary
}
});
Meteor.publish('dictionary', function () {
return Dictionary.find();
});
//endif
//client
t = function(text) {
if (typeof Dictionary === 'undefined') return text;
var res = Dictionary.find({o:text}).fetch()[0];
return res && res.t;
}
Meteor.subscribe('dictionary', function(){
document.title = t('Let the game starts!');
});
Template.help.text = t('How to play');
//html
<body>
{{> help}}
</body>
<template name="help">
{{text}}
</template>
Still doesn't work as we wanted: when templates are rendered Dictionary was undefined. Butt('How to play') in console works perfectly )
Javascript variables aren't shared between the client and server reactively. You have to use a Meteor Collection to store your data e.g
if (Meteor.isServer) {
var Dictionary = new Meteor.Collection("dictionary");
if(Dictionary.find().count() == 0) {
//If the 'dictionary collection is empty (count ==0) then add stuff in
_.each(Assets.getText(LANG+".txt").split(/\r?\n/), function (line) {
// Skip comment lines
if (line.indexOf("//") !== 0) {
var split = line.split(/ = /);
DICTIONARY.insert({o: split[0], t:split[1]});
}
});
}
}
if (Meteor.isClient) {
var Dictionary = new Meteor.Collection("dictionary");
Template.help.text = function() {
return Dictionary.find({o:'Let the game starts!'});
}
}
In the above i'm assuming you have the autopublish package in (its in by default when you create a package so this shouldn't really bother you, but just in case you removed)
With your document title you would have to use a slightly different implementation because remember the data wouldn't be downloaded at the time Meteor.startup is run, since the html and javascript are downloaded first & the data is empty, then the data comes in slowly (and then reactively fills the data up)
I'm new to Meteor and barely understand any of it but let's say I have a collection called mycollection, declared way up top so it's available in both the client and server section:
mycollection = new Meteor.Collection('MyDumbCollection');
And then I have something like this:
if (Meteor.isClient) {
Deps.autorun(function() {
Meteor.subscribe('mycollectionSubscription');
});
Template.myshittytemplate.rendered = function() {
$("#heynow").prepend(shitfuck).dosomething();
godammit = thisfuckingthing;
//paraphrasing
mycollection.insert({thing1: thisfuckingthing});
};
}
if (Meteor.isServer) {
Meteor.publish('mycollectionSubscription', function () {
return mycollection.find();
});
};
And then in my template:
<template name="myshittytemplate">
<div id ="heynow">
{{#each mycollection}}
{{{thing1}}}
{{/each}}
</div>
</template>
What I'm trying to do is have the 'thisfuckingthing' html that's created in the #heynow div saved to the collection and published to everybody. If there's a way to make Meteor simply observe changes to the dom and save them, that's even better.
I do have autopublish uninstalled, if that makes a difference. Halp.
In client Template
Template.myshittytemplate.mycollection = function() {
return mycollection.find({}).fetch();
};
Template.myshittytemplate.rendered = function() {
$(function(){
$("#heynow").prepend(shitfuck).dosomething();
godammit = thisfuckingthing;
//paraphrasing
mycollection.insert({thing1: thisfuckingthing},function(err,_id){
if(err){
console.log(err);
return;
});
console.log(_id);
});
};
}
I needed this in the Client part:
Template.myshittytemplate.mycollection = function() {
return mycollection.find();
};
Hopes this helps somebody!