我正在尝试使用Vue.js全局事件总线。这是我的代码。我检查了很多工作正常的例子,但是当我尝试使用相同的想法为我的项目编码时,它显示了这个错误:
无法读取undefined(...)
的属性'_parent'
var bus = new Vue()
Vue.component('login', {
template: "#login",
data: function(){
return {
ip:'',
sessiontoken:''
}
},
ready: function(){
this.settoken();
this.getip();
},
methods: {
getencrypteduser:function(){
},
getauthentifications: function(event){
this.$http.get('http://example.com/application/authentification', function(response){
console.log(response);
}, {headers:{'Accept' : 'json',
'Content-Type' : 'application/hal+json',
'Authorization' : 'Basic ' + window.btoa(this.user+':'+this.password)}
});
bus.$emit('createauthentification')
}
}
})
Vue.component('register', {
template: "#register",
data: function(){
return {
ip:'',
sessiontoken:''
}
},
ready: function(){
this.settoken();
this.getip();
},
methods: {
getencrypteduser:function(){
},
created: function(){
bus.$on('createauthentification', function(event){
console.log(moment().format('LLLL'));
var data = {
'_links':{
'type' : {
'href' : 'http://example.com/rest/type/node/authenfication'
}
},
'title':[
{
'value' : 'cccccccc'
}
],
'field_id':[
{
'value' : this.$cookie.get('test')
}
],
'field_ip':[
{
'value' : this.ip
}
],
'field_va':[
{
'value' : 'Basic ' + window.btoa(this.user+':'+this.password)
}
],
'field_expiration':[
{
'value' : '2016-08-01T14:30:00'
}
]
}
this.$http.post('http://example.com/entity/node?_format=hal_json', data, function(response){
console.log(response);
this.$set('success', 'ok');
this.$route.router.go('/');
}, { headers:{ 'Accept' : 'json',
'Content-Type' : 'application/hal+json',
'Authorization' : 'Basic ' + window.btoa(this.user+':'+this.password),
'X-CSRF-Token': this.sessiontoken
}
}).error(function(response)
{
this.$set('message','Désolé, nous ne avons pas réussi à vous authentifier. Réessayez.');
this.$set('error',true);
});
this.$cookie.set('test', 'Hello world!', 1);
console.log(this.$cookie.get('test'));
}.bind(this));
},
settoken: function(){
this.$http.get(apiURL4, function(response){
this.sessiontoken = response;
console.log(response);
});
},
getip: function(){
this.$http.get(apiURLip, function(response){
this.ip = response;
console.log(response);
});
}
}
})
这是我的HTML模板:
<template id="login">
<div class="login-box">
<!-- /.login-logo -->
<div class="login-box-body">
<div class="alert" v-bind:class="{ 'alert-success': success, 'alert-danger': error}"v-show="message">{{ message }}</div>
<p class="login-box-msg">Ouvrir une session</p>
<form v-on:submit.prevent="getauthentifications($event)" >
<div class="form-group has-feedback">
<input v-model="user" value="cri" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input v-model="password" value="Drup8@92:ocell" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<a href="#">Mot de passe oublié ?</a><br>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-block btn-flat">Ouvrir une session</button>
</div>
<div class="social-auth-links text-center">
<p>- OU -</p>
</div>
<div class="text-center">
<button href="#!/register" class="btn btn-default btn-block btn-flat">S'inscrire</button>
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
</template>
如果有人遇到此类错误或找到解决方案,请告诉我。