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>

vue2 #vue @blog