How can I use the event @select to select some text from a paragraph in Vue.js?

Question

I\'m using Vue.js with Nuxt in SSR, I would like when I highlight some text to get this text and perform an action on it.

I found a way to do that with

Answer 1

I'm unclear on whether you want to react to a selection inside the input or elsewhere in the document. Assuming inside the input:

• Listen to mouseup event.
• Pass the event itself with $event.
• getSelection() doesn't work on input values, so use selectionStart and selectionEnd to get the selection.

new Vue({
  el: '#app',
  methods: {
    logSelectionWithinInput(e) {
      var selection = e.target.value.substring(
        e.target.selectionStart,
        e.target.selectionEnd
      );
      console.log(selection);
    }
  }
});