in my code below i'm trying to check if the entered email is NOT exists in the API data this.users.email
but it giving me error: can't read email of undefined.However, when i console.log(this.users) i can see all my data , but when i console.log(this.users.email) it giving me undefined, any idea on how to solve it?
export default {
data() {
return {
error: "",
message:"",
users:[],
Reset: false,
login: {
email: "",
password: "",
},
SendEmail:{
email:"",
}
};
},
methods: {
Submit(){
try {
questionService.RequestResetPassword(this.SendEmail).then((response) => {
console.log(response);
});
}
catch (e) { if(!this.sendEmail.email.includes(this.users.email)){ //error here
this.error="enter an existing email";
}}
}
},
mounted: function () {
questionService.getAllUsers().then((jsonData) => {
this.users = jsonData.data.response;
console.log(this.users) // can appear properly
console.log(this.users.email) //undefined
})}
};
Related
My login page was working fine, I did an update and this error appeared.
Uncaught (in promise) TypeError: type.trim is not a function
Login.vue
import { UserLogin } from "#/common/auth_apis";
import { notify } from "#/common/helpers";
import { CheckUserSubscription } from "#/common/subscription_apis";
export default {
data: () => ({
form: {}
}),
methods: {
login() {
UserLogin(this.form).then(res => {
if(res && res.data){
this.$store.dispatch('setToken', res.data.access_token);
this.$store.dispatch('setUserName', res.data.username);
this.$store.dispatch('setUserType', res.data.role);
this.$store.dispatch('setUserAvatar', res.data.avatar);
localStorage.setItem("logged", true);
let _type = res.data.role.trim();
if( _type == "1" || _type == "2") CheckUserSubscription();
this.$router.push({path: '/'});
notify('success', null, 'Inicia sesión correctamente');
}else{
notify('error', null, 'error de inicio de sesion');
}
})
},
gotoRecuperar(){
// if(!this.isManager) return;
this.$router.push('/recuperar/');
},
gotoRegistrar(){
// if(!this.isManager) return;
this.$router.push('/register/');
}
}
};
when executing I get the following error.
Uncaught (in promise) TypeError: type.trim is not a function
at Store.setUserType (index.js?4360:50)
at Array.wrappedActionHandler (vuex.esm.js?2f62:847)
at Store.dispatch (vuex.esm.js?2f62:512)
at Store.boundDispatch [as dispatch] (vuex.esm.js?2f62:402)
at eval (Login.vue?7463:70)
in the page index.js
import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
export default new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage,
})],
state: {
user_id: null,
user_name: null,
user_type: null,
user_avatar: null,
access_token: null,
},
mutations: {
setUserID (state, id) {
state.user_id = id
},
setUserName (state, name) {
state.user_name = name
},
setUserType (state, type) {
state.user_type = type
},
setUserAvatar (state, avatar) {
state.user_avatar = avatar
},
setToken (state, token) {
state.access_token = token
},
clearUserInfo (state) {
state.user_id = null
state.user_name = null
state.user_type = null
state.user_avatar = null
state.access_token = null
}
},
actions: {
setToken ({commit}, token) {
commit('setToken', token);
},
setUserName ({commit}, name) {
commit('setUserName', name.trim());
},
setUserType ({commit}, type) {
commit('setUserType', type.trim());
},
setUserAvatar ({commit}, avatar) {
commit('setUserAvatar', avatar ? avatar.trim() : null);
},
clear ({commit}){
commit('clearUserInfo');
}
},
getters: {
user: state => {
return {
id: state.user_id,
name: state.user_name,
type: state.user_type,
avatar: state.user_avatar
}
},
token: state => {
return state.access_token;
}
},
modules: {}
});
the return value of the service is as follows.
access_token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC93bGluaWkuY29tXC9hcHBzZXJ2aWNlXC9hcGlcL3VzdWFyaW8iLCJpYXQiOjE2MTM0NTQ0OTAsImV4cCI6MTYxMzU0MDg5MCwibmJmIjoxNjEzNDU0NDkwLCJqdGkiOiJZdUFOQVFkdDNoTDJ0UUZOIiwic3ViIjoiMDAwMDAwMDIiLCJwcnYiOiI1ODcwODYzZDRhNjJkNzkxNDQzZmFmOTM2ZmMzNjgwMzFkMTEwYzRmIn0.3uHqmQSCfQjdq1v74xbi39ime8SEs2zC2LxbF5llums"
avatar: "/images/perfil/1612847757.png"
role: 1
username: "VDIEG10"
I have seen in some posts that it could be a problem with the NPM version.
Thanks in advance for the help.
You can only call the trim method on strings. res.data.role is a Number and so res.data.role.trim is undefined.
setUserType({ commit }, type) {
commit('setUserType', type)
}
I am new to VueJs and Laravel. I am trying to build a chat app following this tutorial, and my problem is that I am not able to pass a CONTACT variable (object type) from ChatApp.vue to Conversation.vue. The console gives this error
[Vue warn]: Invalid prop: type check failed for prop "contact". Expected Object, got Null
found in ---> <MessageFeed> at resources/js/officer/components/MessageFeed.vue
<Conversation> at resources/js/officer/components/Conversation.vue
<ChatApp> at resources/js/officer/components/ChatApp.vue
<Root>
first the variable has to pass through ChatApp to Conversation and then to MessageFeed. I tried printing it on console, in ChatApp.vue, it printed the variable's property i.e. name but when I try to print it in Conversation.vue, it says it is null and also gives the above error.
please see the code below:
ChatApp.vue
<template>
<div class="chat-app">
<Conversation :contact="selectedContact" :messages="messages" #new="saveNewMessage"/>
<ContactsList :contacts="contacts" #selected="startConversationWith"/>
</div>
</template>
<script>
import Conversation from "./Conversation";
import ContactsList from "./ContactsList";
const axios = require('axios');
export default {
props: {
user: {
type: Object,
required: true
}
},
data() {
return {
selectedContact: null,
messages: [],
contacts: []
}
},
mounted() {
Echo.private(`messages.${this.user.id}`)
.listen('NewMessage', (e) => {
this.handleIncoming(e.message);
});
console.log(this.user);
axios.get('/officer/contacts')
.then((response) => {
this.contacts = response.data;
console.log("chatapp1: " + this.contacts[0].name);
})
.catch((error) => {
// handle error
console.log(error);
});
},
methods: {
startConversationWith(contact) {
axios.get(`/officer/conversation/${contact.id}`)
.then((response) => {
this.message = response.data;
this.selectedContact = contact;
console.log("chatapp: " + this.selectedContact.name);
});
},
saveNewMessage(message) {
this.messages.push(message);
},
handleIncoming(message) {
if (this.selectedContact && message.from === this.selectedContact.id) {
this.saveNewMessage(message);
return;
}
this.updateUnreadCount(message.from_contact, false);
},
updateUnreadCount(contact, reset) {
this.contacts = this.contacts.map((single) => {
if (single.id !== contact.id) {
return single;
}
if (reset)
single.unread = 0;
else
single.unread += 1;
return single;
})
}
},
components: {Conversation, ContactsList}
}
Conversation.vue
<template>
<div class="conversation">
<h1>{{ contact ? contact.name : 'Select a Contact' }}</h1>
<MessagesFeed :contact="contact" :messages="messages"/>
<MessageComposer #send="sendMessage"/>
</div>
</template>
<script>
import MessagesFeed from './MessageFeed';
import MessageComposer from './MessageComposer';
export default {
props: {
contact: {
type: Object,
default: null
},
messages: {
type: Array,
default: []
}
},
mounted() {
console.log("conversation: "+this.contact);
},
methods: {
sendMessage(text) {
if (!this.contact) {
return;
}
console.log(text);
axios.post('/conversation/send', {
contact_id: this.contact.id,
text: text
}).then((response) => {
this.$emit('new', response.data);
})
}
},
components: {MessagesFeed, MessageComposer}
}
MessageFeed.vue
<template>
<div class="feed" ref="feed">
<ul v-if="contact">
<li v-for="message in messages" :class="`message${message.to == contact.id ? 'sent' : 'received'}`"
:key="message.id">
<div class="text">
{{message.text}}
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
contact: {
type: Object,
required: true
},
messages: {
type: Array,
required: true
}
},
methods: {
scrollToBottom() {
setTimeout(() => {
this.$refs.feed.scrollTop = this.$refs.feed.scrollHeight - this.$refs.feed.clientHeight;
}, 1);
}
},
watch: {
contact(contact) {
this.scrollToBottom();
},
messages(messages) {
this.scrollToBottom();
}
}
}
please, let me know what am I missing here.
Because you konfigurated it to be an Object but you declared it on the initial state as null
selectedContact: null
That should be an object
It should look something like this i guess:
selectedContact: {
id:0
}
I fixed the issue.
This was due to axios.get() response thing. It was fetching data from database after a couple of minutes and the Conversation.vue and ContactList.vue were mounting immediately so they were not getting data.
With the help of my friend, it was fixed by loading the component only when axios have got all the contactlist from database and the very first contact have been passed to the Conversation.vue component i.e using v-if property of component.
I have got a Vue Component which has a list of values, when you select these values this changed the selected array, which in tern is posted to an endpoint.
I have an issue if the user spam clicks these values, as an individual post is created for each change, I want it so that if the user selects another item then the currently pending post is cancelled, so then the new value is posted and updates the endpoint with both the selected items.
However i'm having an issue with aborting the current axios request, I have provided the code below. There are no errors, the request simply doesn't cancel.
export default {
props: {
endpoint: {
default: '',
type: String
},
parameters: {
default: null,
type: Object
}
},
data: () => ({
loaded: false,
selected: [],
save: [],
data: [],
cancel: undefined
}),
methods: {
update() {
const self = this;
let params = this.parameters;
params.data = this.selected;
this.$root.$emit('saving', {
id: this._uid,
saving: true
});
if (self.cancel !== undefined) {
console.log('cancel');
this.cancel();
}
window.axios.post(this.endpoint + '/save', params, {
cancelToken: new window.axios.CancelToken(function executor(c) {
self.cancel = c;
})
}).then(() => {
this.$nextTick(() => {
this.loaded = true;
this.$root.$emit('saving', {
id: this._uid,
saving: false
});
});
}).catch(function (thrown) {
if (window.axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
}
});
}
}
}
I have got a global instance of Axios created on my Vue Application.
I have method:
props: ['convId'],
data() {
return {
messages: [],
newMessage: ''
};
},
methods: {
sendMessage() {
axios.post('/sendMessage/' + this.convId, { message: this.newMessage })
.then(response => this.messages.push(response.data.data));
this.messages.push(newMessage);
this.newMessage = '';
console.log(this.messages.id); //TypeError: Cannot read property 'id' of undefined
}
},
When I try get updated this.messages. I get undifined properties of this object. Why?
In request I return object:
{"body":"test","user_id":1,"type":"text","conversation_id":1,"updated_at":"2018-06-04 13:15:27","created_at":"2018-06-04 13:15:27","id":16,"conversation":{"id":1,"private":1,"data":null,"created_at":"2018-06-01 12:54:33","updated_at":"2018-06-04 13:15:27","users":[{"id":1,"name":"Axer","email":"test#gmail.com","created_at":"2018-06-01 12:35:37","updated_at":"2018-06-01 12:35:37","pivot":{"conversation_id":1,"user_id":1,"created_at":"2018-06-01 12:54:33","updated_at":"2018-06-01 12:54:33"}},{"id":2,"name":"Testumus","email":"teadasdasd#gmail.com","created_at":"2018-06-01 12:46:30","updated_at":"2018-06-01 12:46:30","pivot":{"conversation_id":1,"user_id":2,"created_at":"2018-06-01 12:54:33","updated_at":"2018-06-01 12:54:33"}}]}}
How I can fix this?
You haven't specified newMessage variable. Maybe you wanted to insert this.newMessage.
If you are trying to get the result thats been insert maybe you can return the database data into the response and then push in message , that way you'll be able to get id and other column which you are using to log it out on console.
axios.post('/sendMessage/' + this.convId, { message: this.newMessage })
.then((response) {
this.messages.push(response.data.data) // Fetched message from server
this.newMessage = '';
console.log(this.messages.id);
})
props: ['convId'],
data() {
return {
messages: [],
newMessage: ''
};
},
methods: {
sendMessage() {
axios.post('/sendMessage/' + this.convId, { message: this.newMessage })
.then((response) {
this.messages.push(response.data.data);
this.messages.push(newMessage);
this.newMessage = '';
console.log(this.messages.id);
});
}
},
Try this.
I am building a new app with vuejs 2 and got that error
ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Customers.vue
Module build failed: SyntaxError: C:/Users/Men'm Elkatan/projects/vuecustomers/src/components/Customers.vue: this is a reserved word (17:6)
I used "this" before but didn't get that error expect today.
Here's my code
<script>
export default {
name: 'customers',
data () {
return {
customers: []
}
},
methods: {
fetchCustomers({
this.$http.get('http://slimapp/api/customers')
.then(function(response) {
this.customers = JSON.parse(response.body);
});
})
},
created: function(){
this.fetchCustomers();
}
}
</script>
Please!! help
Your syntax was wrong. It has to be fetchCustomers() { ... }:
<script>
export default {
name: 'customers',
data () {
return {
customers: []
}
},
methods: {
fetchCustomers() {
this.$http.get('http://slimapp/api/customers')
.then(function(response) {
this.customers = JSON.parse(response.body);
});
}
},
created: function(){
this.fetchCustomers();
}
}
</script>