v-for require key

hello

I have experienced an error v-for require key

vue template

{{notification.description}}

        <li>
            <div class="text-center see-all-notifications">
                <a href="notifications.html">
                    <strong>See All Alerts</strong>
                    <i class="fa fa-angle-right"></i>
                </a>
                <div>No notifications</div>
            </div>
        </li>

    </ul>

script import VueTimeago from 'vue-timeago'

    Vue.use(VueTimeago, {
    name: 'timeago',
    locale: 'en-US',
    locales: {
    
        'en-US': require('vue-timeago/locales/en-US.json')
    }
})

export default {

   
    props:['user_id'],

    data(){

        return {

            notifications: []
           
        }

    },
    mounted() {
        Echo.channel('order-tracker')
        .listen('OrderStatusChanged', (booking) => {

            if(this.user_id == booking.user_id){

                this.notifications.unshift({
                    description: 'Booking ID: ' + booking.id + ' updated',
                    url: '/bookings/' + booking.id,
                    time: new Date()
                })

            }
           

        });
    }
}

help me thax

rin4ik

8 years ago

Level 50

I can't see v-for here. where u used v-for?

Fajar

8 years ago

Level 2

@rin4ik

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        <i class="fa fa-bell"></i>
        <span class="notification-count label label-danger"></span>
        <span class="caret"></span>
    </a>

    <ul class="dropdown-menu dropdown-menu-notifications" role="menu">
        <li v-for="notification in notifications">
            <a :href="notification.url" >
                <div>
                    <i class="fa fa-exclamation-circle fa-fw"></i> {{notification.description}}
                    <span class="pull-right text-muted small"><timeago :since="notification.time" :auto-update="5"></timeago></span>
                </div>
            </a>
            <div class="divider"></div>
        </li>

        <li>
            <div class="text-center see-all-notifications">
                <a href="notifications.html">
                    <strong>See All Alerts</strong>
                    <i class="fa fa-angle-right"></i>
                </a>
                <div>No notifications</div>
            </div>
        </li>

    </ul>
</li>

rin4ik

8 years ago

Best Answer

Level 50

try this please

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        <i class="fa fa-bell"></i>
        <span class="notification-count label label-danger"></span>
        <span class="caret"></span>
    </a>

    <ul class="dropdown-menu dropdown-menu-notifications" role="menu">
        <li v-for="(notification,index) in notifications" :key="index">
            <a :href="notification.url" >
                <div>
                    <i class="fa fa-exclamation-circle fa-fw"></i> {{notification.description}}
                    <span class="pull-right text-muted small"><timeago :since="notification.time" :auto-update="5"></timeago></span>
                </div>
            </a>
            <div class="divider"></div>
        </li>

        <li>
            <div class="text-center see-all-notifications">
                <a href="notifications.html">
                    <strong>See All Alerts</strong>
                    <i class="fa fa-angle-right"></i>
                </a>
                <div>No notifications</div>
            </div>
        </li>

    </ul>
</li>

1 like

Fajar

8 years ago

Level 2

@rin4ik

thanks for his advice after I tried it and succeeded

Thank you for always helping me

1 like

rin4ik

8 years ago

Level 50

@Fajar you are welcome.

Please or to participate in this conversation.