javascript - 从其他Vue.js脚本获取数据

原文 标签 javascript vue.js

所以我基本上有2个脚本。处理用户登录的用户脚本,请检查。还有一个脚本,用于处理页面上的操作。现在,我希望能够显示一个由页面脚本控制的按钮,但是仅在用户登录时才显示该按钮。此按钮位于页面脚本元素中,因此我无法通过用户脚本对其进行访问。这也很混乱。

以下是一些代码来解释我尝试做的事情:

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>


但是,当用户登录时该按钮没有显示。很抱歉,如果解决方案非常简单,但是该框架的文档(例如,每5个中的4个)仍然很糟糕。

最佳答案

有两种不同的方法可以完成这种类型的操作,但是主要概念是您需要一个主数据集,所有相关功能都将依赖该主数据集,并且当用户发生更改时会对其进行修改。在这种情况下,您的数据集就是用户信息:

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

关于javascript - 从其他Vue.js脚本获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33077434/

相关文章:

javascript - 在其中心旋转一个三 Angular 形

javascript - 组件内的组件 - VueJS

javascript - 如何在多步表单上屏蔽输入

javascript - 将jQuery事件处理程序添加到具有通配符ID的元素

javascript - 如何在不刷新整个页面的情况下刷新div?

javascript - Chromium localStorage 未显示在开发人员工具中

javascript - Node.js-Nginx 502

javascript - Vue - 包装 HTML5 元素

javascript - Vuetify 文本字段 : Changes To Values Don't Persist (Lost on Blur or Focus)

javascript - Vue:数据字段随着输入的编辑而改变