How to show a notification message using VueJS when a link is clicked

Question

How to show a notification message using VueJS when a link is clicked

I'm working on a Laravel and Vue application, and I've created a component that allows users to copy text to the clipboard when they click on a link. This is how it's implemented:

<a @click="copyURL" ref="mylink">
        <img class="social_icon" 
          src="/images/game/copy.png"
        /></a>
        <input type="text" class="copyurl_txt" 
        value="https://sample.site/" ref="text"></input>

Within the script section, I have included the following functionality:

<script>
export default {
methods: {
        copyURL() {
          this.$refs.text.select();
          document.execCommand('copy');
          alert('link copied');
        }
      },
};
</script>

Now, instead of using an alert box to display the "link copied" message, I want to figure out how to display it in a div or as a flash message. Any suggestions on how to achieve this?

javascript laravel vue.js vue-component

Answer 1

Answer №1

To display a flash message in a Vue component, we can set it as a property and show it based on its truthiness:

export default {
data () {
  return {
    flash: ''
  }
},
methods: {
  copyURL() {
    this.$refs.text.select();
    document.execCommand('copy');
    this.flash = 'link copied';
  }
}

Add a v-if="flash" div to conditionally show the message:

<div v-if="flash" v-text="flash"></div>

The flash message will now only appear once the user has copied the link.

Extra Tip

If you want to automatically hide the flash message after a certain time, you can create a watcher with a setTimeout. Here's an example:

export default {
  data () {
    return {
      flash: '',
      flashTick: null
    }
  },
  methods: {
    clearTick() {
      if (this.flashTick) {
        window.clearTimeout(this.flashTick)
      }  
      this.flashTick = null
    },
    copyURL() {
      this.$refs.text.select();
      document.execCommand('copy');
      this.flash = 'link copied';
    }
  },
  watch: {
    flash: function (newValue, oldValue) {
      if (newValue !== oldValue && newValue) {
      
        this.clearTick()

        this.flashTick = window.setTimeout( () => {
          this.flash = ''
        }, 3000)   
      }
    }
  },
  beforeDestroy() {
    this.clearTick()
  }
}

We keep track of the timeout reference with flashTick for cleanup.
A watcher is set up for the flash variable.
We ensure the new value differs from the old one before setting the timeout.
Hiding the message after 3 seconds using a 3000ms timeout.
In beforeDestroy(), we clean up the timeout and message when the component is destroyed.

Answer 2

To display a flash message in a Vue component, we can set it as a property and show it based on its truthiness:

export default {
data () {
  return {
    flash: ''
  }
},
methods: {
  copyURL() {
    this.$refs.text.select();
    document.execCommand('copy');
    this.flash = 'link copied';
  }
}

Add a v-if="flash" div to conditionally show the message:

<div v-if="flash" v-text="flash"></div>

The flash message will now only appear once the user has copied the link.

Extra Tip

If you want to automatically hide the flash message after a certain time, you can create a watcher with a setTimeout. Here's an example:

export default {
  data () {
    return {
      flash: '',
      flashTick: null
    }
  },
  methods: {
    clearTick() {
      if (this.flashTick) {
        window.clearTimeout(this.flashTick)
      }  
      this.flashTick = null
    },
    copyURL() {
      this.$refs.text.select();
      document.execCommand('copy');
      this.flash = 'link copied';
    }
  },
  watch: {
    flash: function (newValue, oldValue) {
      if (newValue !== oldValue && newValue) {
      
        this.clearTick()

        this.flashTick = window.setTimeout( () => {
          this.flash = ''
        }, 3000)   
      }
    }
  },
  beforeDestroy() {
    this.clearTick()
  }
}

We keep track of the timeout reference with flashTick for cleanup.
A watcher is set up for the flash variable.
We ensure the new value differs from the old one before setting the timeout.
Hiding the message after 3 seconds using a 3000ms timeout.
In beforeDestroy(), we clean up the timeout and message when the component is destroyed.

How to show a notification message using VueJS when a link is clicked

Answer №1

Similar questions

I am currently grappling with a JavaScript mouse over event and encountering some difficulties

What could be causing the props to appear empty in a Child component within a Quasar framework and Vue 3 application?

What is the best way to trigger a function on every navigation event in a React Native application?

Encountering an issue with Nuxt SSR routing - [vue-router] Multiple routes defined with the same

Angular: Nodemailer is encountering an abundance of runtime errors

What is the process for downloading files in React from a Node server?

Trigger an Ajax form submission upon a change occurring

Can all intervals set within NGZone be cleared?

Tips for resolving this unhandled error in React TypeScript

Incorporating interactive elements and expanding rows within a multidimensional JSON array using AngularJS

Facing difficulty in submitting form data with Reactjs

Sending the same element to a personalized filter repeatedly

Retrieve information from a URL using an Express API

Enhancing input fields in Jquery to track remaining characters for multiple inputs replicated

Shuffle a Document Fragment in a random order before adding it to the DOM using JavaScript

Exploring arrays and objects in Laravel is an essential part of developing efficient

React - Triggered a higher number of hooks compared to the prior render (potentially based on a condition

Is the incorporation of state management tools like Redux or Vuex proven to enhance the speed of a web application?

Steps to transfer extra files such as config/config.yaml to the .next directory

Leveraging Ajax to send JSON data to PHP session