notifications.vue

<template>
  <div class="notifications">
    <notification-item v-for="item in notificationsItems" v-if="$index === 0" :item="item" :index="$index"></notification-item>
  </div>
</template>

<script>
// Imports.
import notificationItem from './notificationItem'

// Getters.
import {
  notificationsItems,
  notificationsHasItems
} from '../../vuex/getters'



// Component export.
export default {

  /**
   * Vuex actions & getters.
   *
   * @type {Object}
   */
  vuex: {

    getters: {
      notificationsItems,
      notificationsHasItems
    }

  },



  /**
   * Used child components.
   *
   * @type {Object}
   */
  components: {
    notificationItem
  },



  /**
   * The initial component data.
   *
   * @return {Object} The component's data.
   */
  data() {
    return {}
  },



  /**
   * Computed properties.
   *
   * @type {Object}
   */
  computed: {

    /**
     * Generates a list of classes to use on the component.
     *
     * @return {Object} A map of classes to use.
     */
    classList() {
      return {
        'notification--good': this.item.type === 'good',
        'notification--bad': this.item.type === 'bad',
        'notification--warn': this.item.type === 'warn'
      }
    }

  },



  /**
   * Component methods.
   *
   * @type {Object}
   */
  methods: {

    /**
     * Removes a notification.
     *
     * @param {Number} index The index of the notification to remove.
     */
    remove(index) {
      this.notificationsRemove(index)
    }

  }

}
</script>