[Vuejs]-How to make notifications float and right aligned in css vuejs

by

0👍

Your notifications are overlapping as all of those have same position set in the style. With vue.js you can change their position dynamically. TO give an example I have added a left style to the notification div and assigned it’s position randomly. You can see the demo here.

JS:

  methods: {
    addNotification () {
      this.notifications.push({ message: 'Some error message...', leftPos: Math.random() * 500 })
      this.notification_count += 1
    }
  }

HTML:

<template id="notification">
  <div class="notifications" :style="{left: notification.leftPos + 'px'}">
    <p>{{ notification.message }}</p>
  </div>
</template>

Leave a comment