Hey i am trying to make my seed for cordova projects.
Everything was going good till this.$store in src/components/Main.vue is undefined i have no more
clues why cuz in other app it was working and never had this issue maybe someone more experianced with vue2 could help me out.
Cheers.
This is full code repo
edit:
If i pass $store from template or use this.$store in created store is working.
I was using arrow function in methods that was an issue.
Related
Im following the tutorial here...
https://vue-tutorial.meteor.com/simple-todos/
But I get an error even just when installing the default vue meteor app.
meteor: {
$subscribe: {
'experiments': [],
},
experiments () {
return Experiments.find({}).fetch();
},
},
gives me an error
TypeError: Cannot read properties of undefined (reading 'find')"
If I console log Experiments, its there and I get the Meteor collection object. Any idea why this might be occuring??
import Experiments from '../../api/collections/Experiments'
console.log(Experiments)
Gives me
So its obviously an available object.
Just the find({}).fetch() method on it doesnt seem to be available??
UPDATE:
THE ANSWER BELOW WORKED (kind of)
experiments() {
let experimentsData = Experiments.find({}).fetch();
if (this.$subReady.experiments) {
console.log(experimentsData);
return experimentsData;
}
},
This now returns the experiments in the console log. So they are available. However rendering them to the template doesnt.
<h2>Experiments</h2>
<div v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
Any idea why??
Does it have to be put into a vue data object? Computed??
I thought the meteor:{} object acted kinda like computed, but it appears not??
How do I get the data onto the screen??
The answer is actually not correct.
I am experiencing the same issue from an out of the box meteor vue app created with: meteor create vanillaVueMeteor --vue
The error occurs if you define ANY function in the meteor: section of the default export (and bizarrely the first function defined is always being called regardless of whether it is actually referenced anywhere). This is obviously a bug either in the meteor vue creator or some combination of the default versions of meteor and vue libraries.
Additionally with respect to providing data to your template: you should not call fetch, just pass the result of the find which then means you won't need to wait for the subs to be ready because reactivity will update the view when the data is available. Obviously the underlying issue is preventing this all from working correctly.
UPDATE:
It seems to be an issue with 2.7.x Downgrading to the latest 2.6 worked for me:
meteor npm remove vue
meteor npm i vue#2.6 --save
It looks like you need to just use this.$subReady in your 'experiments` function to handle the timing of how the data comes in over DDP in Meteor.
I use something like this in all my subscriptions.
When the subscription starts up, the data won't be delivered from the publication the very 1st time, so that is what causes your undefined error that you are getting.
I love the Vue + Meteor combo. You can also come join the community Slack or Forum if you have questions, there are a bunch of us to help you there.
Happy Coding!
Bob
experiments () {
let experimentsData = Experiments.find({}).fetch();
if(this.$subReady.experiments){
return experimentsData;
}
},
This should resolve your issue in the UI. The HTML data will load and run before all the data from Meteor is ready, so you just use something like this:
<h2>Experiments</h2>
<div v-if="subReady.experiments" v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
on react native in a random scenario react-query get stuck in loading state where isLoading is always true and the data is undefined.
I checked the cache using the flipper-react-query-native plugin, I found that the data is saved in the cache but it's not returned.
can anyone help me?
ScreenShot :
I scratched my head for a long time on this one. This may be the solution for you! This resolved things on my end. I realized after testing out any promise, they'd never resolve. That's when I found this github issue.
https://github.com/facebook/react-native/issues/31558#issuecomment-878342213
While experimenting with React Native and using States. I came against super(props). I searched here in the forum for a useful explaination, but I didn't find any.
Here is a look on the function, where I am using super and constructor...
1
I tried to delete props parameter in constructor, but it gave me an error. Then I tried to delete super(props), it gave me again an error. However, the code perfectly work, when I just used super() without parameter.
My conclusion is, in constructor i am saying we are using props and with super I am allowing an access over all props globally in code?
I am not really sure, correct me please If I am wrong.
I appreciate any comments with advises. Thanks in advance!
Edit:
I also added the rest of the code...For a clear undestanding..
2
I appreciate your help..
In React Native when using super(props) you can immediately access the props via this.props in the constructor while with only super() you can't.
In other methods like render however you can always utilize this.props.
Here is a complete examples of the explaination above:
https://stackoverflow.com/a/34995257/4293498
So the Vue-Material docs (https://vuematerial.io/components/bottom-bar) says it is possible to create a md-bottom-bar stuffed with md-bottom-bar-item, while being able to make md-bottom-bar-item act like a <router-link>
Their code can be seen right below "Seamless integration with Vue Router" (this is exactly what it's meant for by the way ^^), and my code looks like this :
<md-bottom-bar-item
id="messageRoute"
to="/Messages"
#click="stuff"
md-label="Notifications"
md-icon="message">
</md-bottom-bar-item>
<md-bottom-bar-item
id="settingsRoute"
to="/Settings"
#click="stuff"
md-label="Options"
md-icon="settings">
</md-bottom-bar-item>
These are tabs to a notifications list, and the settings page for my app.
The error I got when I click on an item is literally this (I got it 5 times though, beucause there's 5 items in my navbar) :
[Vue warn]: Missing required prop: "to"
found in
---> <MdButton> at src/components/MdButton/MdButton.vue
<MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
<NavBar> at src\components\NavBar.vue
<App> at src\App.vue
<Root>
I got the same error without the #click='stuff' by the way, nothing to do with it.... I guess...
Is it about Vue-Material#1.0.0 (the one I'm using) being in beta or ? It feels like I'm doing what is showed in the doc, I even copy-pasted it and changed things so it would fit in my app.
For now I just did a goTo(path) methods, that just do this.$router.replace(path), but the bottom bar is not sync with Vue's router, with the md-sync-route attribute, like so :
<md-bottom-bar md-sync-route>
<!-- stuff -->
</md-bottom-bar>
Not a critical problem, but damn, why Vue.js, why ??? ^^'
And, what a troll :
Ok, this is interesting.
As the issue you gave me pointed out, this might be a version problem, but my vue version is 2.9.2 (checked it with vue -V). Nevermind, I still ran npm update -g vue, and the answer I got from the terminal... well :
+ vue#2.5.11
updated 1 package in 0.626s
Now everything works fine (router, to, etc...).
But why though ? Does vue-material uses a slightly different vue, or there's some parts that are redefined, like router link's behavior on certain element like md-bottom-bar-item ?
And why npm install couldn't fix that ? Well anyway, now it works, and my last questions exists probably because this framework is a beta and few things have to be done... or because I'm starting to do stuff with npm etc ^^
If you know something it would be helpful for me to know, feel free to tell me, I'd be glad to hear...
It will also happen in 1.0.0-beta-8, but there seems to be a commit to fix
https://github.com/vuematerial/vue-material/commit/6860d3a004b09baef751724c0d9bf1ebdf92b752
I`m getting js error, after loading below function,
Ext.onReady(function(){
aFunc123([{header:'ss',Fn:'aFunc1(1)'}],"",undefined,{showCheck:true})
})
After coming out of "aFunc123" function,extjs immediatly calls "onDocumentReady" function, problem is, passed arguments are undefined,and also I dont know how it`s getting called.Please check out, for this problem I`m getting error like `"Unable to get property 'apply' of undefined or null reference"`.
Please suggest me what wrong I`m doing here.
I`m using ExtJS 3.2,IE10.
Thanks in advance.
Ext 3.4.1a was released recently to add IE10 support. You can download it from the Ext website. Otherwise, older versions don't have support for IE10.