[英]Get data from mixin Vue.js
I have a Vue component that requires
a file that is a Vue mixin. 我有一个Vue组件, requires
一个Vue mixin文件。 The file that is required is part of a vendor package so I cannot modify that file. 所需的文件是供应商包的一部分,因此我无法修改该文件。 I need to get the notifications
prop from the mixin. 我需要从mixin获取notifications
道具。 The end result is that I am going to access the notifications
object and get the amount of read notifications so that I display this count as a computed property. 最终结果是我将访问notifications
对象并获取读取通知量,以便将此计数显示为计算属性。 It seems that using this.notifications
does not work. 似乎使用this.notifications
不起作用。 How can I do this? 我怎样才能做到这一点?
Here is my component: 这是我的组件:
var base = require('notifications/notifications');
Vue.component('spark-notifications', {
mixins: [base],
});
Here is the notifications
file that was required in the previous component: 以下是上一个组件中所需的notifications
文件:
module.exports = {
props: ['notifications', 'hasUnreadAnnouncements', 'loadingNotifications'],
/**
* The component's data.
*/
data() {
return {
showingNotifications: true,
showingAnnouncements: false
}
},
methods: {
/**
* Show the user notifications.
*/
showNotifications() {
this.showingNotifications = true;
this.showingAnnouncements = false;
},
/**
* Show the product announcements.
*/
showAnnouncements() {
this.showingNotifications = false;
this.showingAnnouncements = true;
this.updateLastReadAnnouncementsTimestamp();
},
/**
* Update the last read announcements timestamp.
*/
updateLastReadAnnouncementsTimestamp() {
this.$http.put('/user/last-read-announcements-at')
.then(() => {
this.$dispatch('updateUser');
});
}
},
computed: {
/**
* Get the active notifications or announcements.
*/
activeNotifications() {
if ( ! this.notifications) {
return [];
}
if (this.showingNotifications) {
return this.notifications.notifications;
} else {
return this.notifications.announcements;
}
},
/**
* Determine if the user has any notifications.
*/
hasNotifications() {
return this.notifications && this.notifications.notifications.length > 0;
},
/**
* Determine if the user has any announcements.
*/
hasAnnouncements() {
return this.notifications && this.notifications.announcements.length > 0;
}
}
};
The beginning of the Laravel blade template: Laravel刀片模板的开头:
<spark-notifications
:notifications="notifications"
:has-unread-announcements="hasUnreadAnnouncements"
:loading-notifications="loadingNotifications"
inline-template>
Here is the method in the spark.js
which gets the notifications: 这是spark.js
中获取通知的方法:
data: {
user: Spark.state.user,
teams: Spark.state.teams,
currentTeam: Spark.state.currentTeam,
loadingNotifications: false,
notifications: null,
supportForm: new SparkForm({
from: '',
subject: '',
message: ''
})
},
getNotifications() {
this.loadingNotifications = true;
this.$http.get('/notifications/recent')
.then(response => {
this.notifications = response.data;
this.loadingNotifications = false;
});
},
And, here is where everything is bootstrapped together app.js
: 而且,这里是一切都在app.js
引导的地方:
require('spark-bootstrap');
require('./components/bootstrap');
var app = new Vue({
mixins: [require('spark')]
});
this.notifications
is the correct way. this.notifications
是正确的方法。 If that is not defined, it is because no notifications
prop was passed to the component. 如果没有定义,那是因为没有notifications
prop传递给组件。
Edit: The reason it was null
in the ready()
function is that the http request retrieving the notifications hadn't returned yet. 编辑:它在ready()
函数中为null
的原因是检索通知的http请求尚未返回。 OP was trying to get the count of unread notifications, which we got working like so: OP试图获取未读通知的数量,我们得到了这样的工作:
Vue.component('spark-notifications', {
mixins: [base],
computed: {
notificationCount:function(){
var unread = this.notifications.notifications.filter(function(notif){
return !notif.read;
});
return unread.length
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.