I'm struggling with a variable in vue.js.
Here's the situation - I want to set a loggedIn variable to true when a user logs in, and then set it to false when the user logs out. This is what my code looks like:
index.js:
export default {
state: {
loggedIn : false
},
login() {
var self = this;
var creds = {
username: 'username',
password: 'password'
}
$.ajax({
url: '/login',
type: 'POST',
data: creds,
success: function(response) {
self.state.loggedIn = true;
alert('Logged in!!');
},
error: function() {
alert('Error logging in!');
}
});
},
}
App.vue:
import auth from './index.js';
module.exports = {
data: function () {
return {
loggedIn: auth.state.loggedIn,
}
},
watch: {
loggedIn: function () {
alert('loggedIn value has changed!!!');
}
},
}
In App.vue, you can see that my loggedIn variable relies on the imported value from index.js. However, it seems that loggedIn in App.vue isn't reacting to changes in loggedIn in index.js.
Any ideas on what might be causing this issue?
Thank you for your help!