[Vue warn]: Error in created hook: "TypeError: $ is not a function" [closed] - vue.js

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm creating a simple Vue Laravel CRUD
So in my component's script I have
export default {
data: function() {
return {
items: []
}
},
method: {
getList() {
axios.get('api/items')
.then( response => {
this.items = response.data
})
.catch(error => {
console.log(error)
})
}
},
created() {
this.getList();
}
}
I have created a method getList() to get the data which then I want to call in the create(). But the Vue keeps prompting an error, that my getList() is not a function.
app.js:21339 [Vue warn]: Error in created hook: "TypeError: this.getList is not a function"
Then I tried to put my request directly inside the create() without calling my method, and it works just fine I was able to get the data.
I'm still learning and I'd appreciate any help :)

You have a typo - method should be methods.

Related

Failed to fetch vue.js [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I add this code at mounted()
mounted() {
fetch('http://127.0.0.1/logined')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
}
It's not fixing, API works well.
API returns
{'result':'false'}
Console Log
This problem not fixing for me, I tried at another PC but same.
Axios is not working too so I changed to fetch.
There is no problem with your code, the error you showed in your screenshot says you cannot get any result from the URL.
It looks like your browser is under CORS policy and this is why it doesn't work or you use GET instead of POST.

React Native Navigation Issue giving error after splash screen [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to load my login form after the splash screen but it is giving an error as
Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
my app.js file
As far as my understanding is concerned. I can see some place of improvements, and one of them would be:
Using replace() correctly with the help of StackActions reference
import { StackActions } from '#react-navigation/native';
navigation.dispatch(StackActions.replace('Home'));
Use useEffect hook, to perform setTimeOut() operation in your SplashScreen component
import React, { useEffect } from 'react';
useEffect(() => {
const timer = setTimeout(() => {
navigation.dispatch(StackActions.replace('Home'));
}, 1500);
return () => clearTimeout(timer);
}, []);
I hope, you will be good after following that in your code.
If LoginForm has a separate NavigationStack configured inside it this issue will occur, please try after removing it.

How do I use tabBarOnLongPress in bottom navigation(react navigation v5)? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I couldnt find and example or snippets of how to use tabBarOnLongPress on react navigation v5.If somebody's done it already,help?
If you are using standard TabNavigator, just subscribe to tabLongPress event in your screen components.
const unsubscribe = navigation.addListener('tabLongPress', (e) => {
// Do something
});
Example on Snack: https://snack.expo.io/HewmpqPQD
If you are using custom Tab Navigator, don't forget to emit tabLongPress event.
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
More info here: https://reactnavigation.org/docs/material-top-tab-navigator/

Page reload causes Vuex getter to return undefined

Using Vue.js (Vuetify for FE).
A page reload causes the getter in Vuex to fail with pulling required data from the store. The getter returns undefined. The code can be found on GitHub at: https://github.com/tineich/timmyskittys/tree/master/src
Please see the full details on this issue at timmyskittys.netlify.com/stage1. This page has complete info on the issue and instructions on how to view the issue.
Note, there is mention of www.timmyskittys.com in the issue description. This is the main site. timmyskittys.netlify.com is my test site. So, they are the same for all intents and purposes. But, my demo of this issue is at the Netlify site.
I read the complete issue in the website you mentioned. It's a generic case.
Say, for cat details page url: www.timmyskittys.com/stage2/:id.
Now in Per-Route Guard beforeEnter() you can set the cat-id in store. Then from your component call the api using the cat-id (read from getters)
I found the solution to my issue:
I had to move the call of the action which calls the mutation that loads the .json file (dbdata.json) into a computed() within App.vue. This was originally done in Stage1.vue.
Thanks all for responding.
I had the same issue and my "fix" if it can be called that was to make a timer, so to give the store time to get things right, like so:
<v-treeview
:items="items"
:load-children="setChildren"
/>
</template>
<script>
import { mapGetters } from 'vuex'
const pause = ms => new Promise(resolve => setTimeout(resolve, ms))
export default {
data () {
return {
children: []
}
},
computed: {
...mapGetters('app', ['services']),
items () {
return [{
id: 0,
name: 'Services',
children: this.children
}]
}
},
methods: {
async setChildren () {
await pause(1000)
this.children.push(...this.services)
}
}
}
</script>
Even though this is far from ideal, it works.

componentWillReceiveProps not firing even though state has clearly changed in the reducer

i know there's a lot of answers to this same question on SO, however i've read through them and none seem to solve the problem i am seeing. really need someone's help on this.
scenario: we have an existing React Native app (v0.42.3) that is in the App Store and all was well. Today due to an errant 3rd party library, we needed to delete node_modules and rebuild. That has been done and no issues. The app launches fine. However now for some reason, the login flow is broken and it "seems" to be due to Redux. Its just a simple login flow. Here are hopefully all the details:
user taps login -> call action creator -> success -> call reducer -> update state which invokes mapStateToProps(state)
the problem i can't solve yet - is that :
1) mapStateToProps IS firing and you can see that the needed property (displayLoginModal) has changed from true to false
2) componentWillReceiveProps is NOT firing which breaks the app flow
Action Creator
..auth worked fine, then call..
dispatch({
type: LOGIN_USER_SUCCESS,
payload: { user: userInfo },
greeting: isNewUser ? "welcome" : "hi",
isLoggedIn: true,
waitingForLoginCompletion: false
});
dispatch({ type: SHOW_LOGIN_MODAL, display: false });
Reducer
case SHOW_LOGIN_MODAL:
return {
...state,
displayLoginModal: action.display
};
case LOGIN_USER_SUCCESS:
return {
...state,
user: action.payload,
greeting: action.greeting,
error: "",
loginUserError: "",
faceBookLoading: false,
googleLoading: false
};
The "Receiving/Listening Component (LoginView)
am using the #connect decorator
Here is the mapStateToProps function:
function mapStateToProps(state) {
console.log(state) <== **IMPORTANT. this IS showing that the prop has changed
const {
email,
password,
error,
... etc...
displayLoginModal <== this is the prop that IS changing (from true, to false)
} = state.auth;
return {
..snip.. other props etc...
displayLoginModal, <== returning it here
isConnectedToFirebase
};
}
....
#connect(
mapStateToProps,
{
updateTermsOfUseAndPrivacy,
emailChanged,
passwordChanged,
errorMessageChanged,
loginUserWithEmail,
loginUserWithFacebook,
facebookLogin,
googleLogin,
loginUserWithGoogle,
resetUserPassword,
setTermsOfUseAndPrivacy,
logout,
resetPasswordComplete
}
)
export default class LoginView extends Component {
... etc
So again - even thought mapStateToProps IS firing and displays the change in the properties value correctly - for some weird unknown reason to me componentWillReceiveProps is NOT firing.
Why ? This is a serious blocker for us at moment so greatly appreciate some help and advice. Hopefully its something obvious I've missed.
alright - this is sorted. the issue here, had NOTHING to do with Redux. It was due a missing route. Not that any of the cryptic / non-existent error messages had anything to do with that. I take responsibility, but I will say I'm officially no longer a fan of React Native. death by a thousand cuts.