Acquire data from other Vue.js Scripts
Question
So I basicly have 2 scripts. A user script that handles the user login, check ect. And a script that handle actions on a page. Now I want to be able to show a button controlled by the page script, but only show that button if the user is logged in. This button is in the page script element, therfore I can't accsess it through the user script. This would also be very messy.
Heres some code to explain what I have tried to do:
user.js:
var userAuth = new Vue({
el: '#userSegment',
data: { 'loggedin': false, },
ready: function(){
if(userLoggedIn){ this.loggedin = true; }else{ this.loggedin = false; }
},
});
page.js
new Vue({
el: '#body',
data: { 'buttonclicked': false, },
method: {
clicked: function(){ this.buttonclicked = true; },
},
});
index.html:
<html>
<div id='userSegment></div>
<div id='body'>
<button v-if='userAuth.loggedIn' v-on='click: clicked()' >
Click Me
</button>
</div>
//both the script links are here. Dont worrie
</html>
But the button is not showing when the user is logged in. Sorry if the solution is stupidly simple, but yet again the documentation for this framework (like every 4 in 5) is awful and a mess.
1 answers
solution1
1 ACCPTED 2015-10-26 13:24:37
There are a couple different ways to accomplish this type of action, but the main concept is that you will want to a master dataset that all related functions will rely on and that gets modified when something changes with the user. In this case your dataset is the user information:
// This would be the master global user JS object
var userAuthGlobals = {
loggedIn: false
};
var userAuth = new Vue({
el: '#userSegment',
ready: function(){
// Setting the global user auth
if(userLoggedIn) {
userAuthGlobals = true;
} else {
userAuthGlobals = false;
}
}
});
var body = new Vue({
el: '#body',
// Relies on the global user auth
data: userAuthGlobals,
methods: {
clicked: function(){ this.buttonclicked = true; }
}
});
<html>
<div id='userSegment></div>
<div id='body'>
<button v-if='loggedIn' v-on='click: clicked' >
Click Me
</button>
</div>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.