Vue.js
Example 1
<template>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<i class="icon-bell2"></i>
<span class="visible-xs-inline-block position-right">Activity</span>
<span v-if="notifications.length > 0" class="status-mark border-pink-300"></span>
</a>
<div class="dropdown-menu dropdown-content">
<div class="dropdown-content-heading">
Activity
<ul class="icons-list">
<li @click="readAll()"><a href="#"><i class="icon-menu7"></i></a></li>
</ul>
</div>
<ul class="media-list dropdown-content-body width-350" v-if="notifications.length > 0">
<notification v-for="notification in notifications">
<a href="#">{{ notification.target_id }}</a> already parsed
<template slot="time">4 minutes</template>
</notification>
</ul>
<ul class="media-list dropdown-content-body width-350" v-else>
No activity
</ul>
</div>
</li>
</template>
<script>
export default {
methods: {
readAll: function () {
axios.post('/notes/readed')
.then(function (response) {
this.notifications = [];
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
},
data() {
return {
notifications: []
}
},
mounted() {
axios.get('/notes')
.then(function (response) {
this.notifications = response.data;
}.bind(this))
.catch(function (error) {
console.log(error);
});
Echo.private('App.User.' + window.Laravel.userId)
.notification((notification) => {
console.log(notification);
this.notifications.push(notification);
});
}
}
</script>
Example 2
<template>
<div class="target-create-pane">
<div class="form-group">
<label class="control-label col-lg-2">Site ID</label>
<div class="col-lg-10">
<input name="id" type="text" v-model="site_id" @blur="blured()" class="form-control">
</div>
</div>
<div class="tabbable tab-content-bordered" v-if="groups.length > 0">
<ul class="nav nav-tabs nav-tabs-highlight">
<li class="active"><a href="#groups" data-toggle="tab" aria-expanded="true">Groups</a></li>
<li class=""><a href="#friends" @click="loadFriends()" data-toggle="tab"
aria-expanded="false">Friends</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane has-padding active" id="groups">
<table class="table target-create-table table-condensed">
<thead>
<tr>
<th width="3%">Follow</th>
<th>Group</th>
<th>Screen Name</th>
<th>Public</th>
</tr>
</thead>
<tbody>
<tr v-for="group in groups">
<td><input :id="group.id" type="checkbox" :value="'-' + group.id" name="groups[]"></td>
<td>
<a href="" target="_blank">
<img :src="group.photo_50" width="30" class="group-photo">
</a>
<label :for="group.id">{{ group.name }}</label>
</td>
<td>{{ group.screen_name }}</td>
<td v-if="group.is_closed == 0">Yes</td>
<td v-else>No</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane has-padding" id="friends">
<table class="table target-create-table table-condensed">
<thead>
<tr>
<th width="3%">Follow</th>
<th>Friend</th>
<th>Screen Name</th>
</tr>
</thead>
<tbody>
<tr v-for="friend in friends">
<td><input :id="friend.id" type="checkbox" :value="friend.id" name="friends[]"></td>
<td>
<a href="" target="_blank">
<img :src="friend.photo_50" width="30" class="group-photo">
</a>
<label :for="friend.id">{{ friend.first_name }} {{ friend.last_name }}</label>
</td>
<td>{{ friend.domain }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="text-right">
<button type="submit" :disabled="submitDisabled" class="btn btn-primary">Save
<i class="icon-arrow-right14 position-right"></i></button>
</div>
</div>
</template>
<script>
export default {
methods: {
loadFriends: function () {
if (this.friends.length == 0) {
axios.post('/friends', {
site_id: this.site_id,
})
.then(function (response) {
if (response.data) {
this.friends = response.data;
this.submitDisabled = false;
}
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
},
loadGroups: function () {
axios.post('/groups', {
site_id: this.site_id,
})
.then(function (response) {
if (response.data) {
this.groups = response.data;
this.submitDisabled = false;
}
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
blured: function () {
this.groups = [];
this.friends = [];
this.loadGroups();
}
},
data() {
return {
friends: [],
groups: [],
site_id: 9999999,
submitDisabled: true
}
},
mounted() {}
}
</script>