從其他Vue.js腳本獲取數據

所以我基本上有2個腳本。處理用戶登錄，檢查等的用戶腳本。還有一個處理頁面操作的腳本。現在，我希望能夠顯示由頁面腳本控制的按鈕，但只有在用戶登錄時才顯示該按鈕。此按鈕位於頁面腳本元素中，因此我無法通過用戶腳本對其進行處理。這也會非常混亂。從其他Vue.js腳本獲取數據

繼承人一些代碼來解釋什麼，我試圖做：

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>

但按鈕沒有顯示當用戶登錄時。對不起，如果解決方案非常簡單，但這個框架的文檔（比如每4個5）都很糟糕並且一團糟。

來源

2015-10-12 Ashley Wrench

有幾種不同的方式來完成這種類型的行動，但主要的概念是，你將要到主數據集，所有相關的功能將依賴於當一些與用戶更改被修改。在這種情況下，你的數據集是用戶信息：

// 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>

來源

2015-10-26 13:24:37

從其他Vue.js腳本獲取數據

回答

相關問題