CODEWITHSUNDEEP
javascriptvue.js
Ashley Wrench
Ashley Wrench

Reputation: 990

Acquire data from other Vue.js Scripts

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.

Upvotes: 0

Views: 87

Answers (1)

Stephen Hallgren
Stephen Hallgren

Reputation: 1366

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>

Upvotes: 1

Related Questions