We Keep Coding

Vue js: compare elements in the array

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
})}
};

Why variable is unresolved if there is an instance of it?

Why is this variable unresolved if there is an instance that we transwer into the function?
Could anyone help me with it?
Vue.component('university-row', {
props: ['university', 'editMethod'],
template: 'Templates'
methods: {
edit: function () {
>>>>>>>>>>>>>>this.editMethod(this.university);<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
}
}
});
Vue.component('university-list', {
props: ['universities'],
data: function() {
return {
university: null
}
},
template: 'Templates',
methods: {
editMethod: function() {
>>>>>>>>>>>>>>>>>this.university = university;<<<<<<<<<<<<<<<<<<<<<<This one is unresolved
}
}
});
the second component has
universityApi.get().then(result =>
result.json().then(data =>
data.forEach(university => this.universities.push(university))
)
)
},```

Detect changes in JSON on a javascript side

I am receiving data in JSON from PHP and I want to detect if JSON have changed on Javascript side, not template side. Does anybody have solution? I am attaching a code.
export default {
name: 'dashboard_invoices',
data() {
return {
invoices: [],
newInvoices: [],
}
},
methods: {
loadDataInterval: function() {
this.$http.get('http://127.0.0.1/pdaserwis-crm/api/vue/vue?action=order_table').then(function (response) {
this.newInvoices = response.data;
if(this.newInvoices != this.invoices) {
// alert('Dodano nowa fakture');
this.invoices = this.newInvoices;
}
})
},
loadData: function() {
this.$http.get('http://website.pl').then(function (response) {
this.invoices = response.data;
})
}
},
created: function () {
this.loadData();
setInterval(function () {
this.loadDataInterval();
}.bind(this), 3000);
}
}
I want to catch if invoices have changed and view appropriate alert for that.

The problem solved. It took to compare both arrays with deep-equal by watch handler.
watch: {
invoices: {
handler(val, oldVal)
{
if(!(deepEqual(val, oldVal))) {
console.log('elo');
}
}
}
}

Vue.js. Data property undefined

I'm trying to access my data property in my Vue.js component. Looks like I'm missing something obvious.
Here is a short version of my code. StoreFilter.vue is a wrapper for matfish2/vue-tables-2.
<template>
<store-filter :selected.sync="storeIds"></store-filter>
</template>
<script>
import StoreFilter from './Filters/StoreFilter';
export default {
components: {
StoreFilter
},
data() {
return {
options : {
requestFunction(data) {
console.log(this.storeIds); //undefined
return axios.get('/api/orders', {
params: data
}).catch(function (e) {
this.dispatch('error', e);
}.bind(this));
},
},
storeIds: [],
}
},
watch : {
storeIds(storeIds) {
this.refreshTable();
}
},
methods : {
refreshTable() {
this.$refs.table.refresh();
}
}
}
</script>
How to get storeIds from requestFunction?

Use a closure, see rewrite below.
data() {
let dataHolder = {};
dataHolder.storeIds = [];
dataHolder.options = {
requestFunction(data) {
// closure
console.log(dataHolder.storeIds); // not undefined
return axios.get('/api/orders', {
params: data
}).catch(function (e) {
this.dispatch('error', e);
}.bind(this));
}
}
return dataHolder;
}

I recommend using the created() way to handle this.
export default {
// whatever you got here
data () {
return {
options: {}
}
},
created () {
axios.get('/api/orders', { some: params }).then(response => this.options = response.data)
}
}

Javascript get data through methods

I have been trying to get these piece of code to work but I cannot find the right solution. Please can someone tell me why this works (loads data on load) but new records are not shown automatically.
<script>
Vue.component('comments',{
template: '#comment-vue-template',
data:() => {
return {
comments: []
}
},
created: function(comments) {
this.$http.get('/comments')
.then(response => {
this.comments = response.body
});
setTimeout(1000);
},
methods: {
getComments: function(comments) {
this.$http.get('/comments')
then(response => {
this.comments = response.body
})
},
},
});
new Vue({
el:'#app',
});
</script>
and this code below does not work at all :-
<script>
Vue.component('comments',{
template: '#comment-vue-template',
data:() => {
return {
comments: []
}
},
created: function(comments) {
this.getComments();
},
methods: {
getComments: function(comments) {
this.$http.get('/comments')
then(response => {
this.comments = response.body
});
setTimeout(this.getComments,1000);
},
},
});
new Vue({
el:'#app',
});
</script>
Thanks in advance

Found my mistake
<script>
Vue.component('comments',{
template: '#comment-vue-template',
data:() => {
return {
comments: []
}
},
created: function() {
this.getComments();
},
methods: {
getComments() {
this.$http.get('/comments').then(response => {
this.comments = response.body
});
setTimeout(this.getComments,1000);
}
}
});
new Vue({
el:'#app',
});
</script>