gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 08:39:54 28 4
gpt4 key购买 nike

所以我基本上有两个脚本。处理用户登录、检查等的用户脚本。以及处理页面上操作的脚本。现在我希望能够显示由页面脚本控制的按钮,但仅在用户登录时显示该按钮。该按钮位于页面脚本元素中,因此我无法通过用户脚本访问它。这也会非常困惑。

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

用户.js:

var userAuth = new Vue({

el: '#userSegment',
data: { 'loggedin': false, },
ready: function(){
if(userLoggedIn){ this.loggedin = true; }else{ this.loggedin = false; }
},

});

页面.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>

但是当用户登录时按钮没有显示。很抱歉,如果解决方案简单得愚蠢,但是这个框架的文档(就像五分之四)又糟糕又困惑。

最佳答案

有几种不同的方法可以完成此类操作,但主要概念是您需要一个所有相关函数都依赖的主数据集,并且当用户发生某些变化时该数据集会被修改。在这种情况下,您的数据集是用户信息:

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

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com