JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="vue">

    <input v-model="url" type="url" @paste.prevent="shorten">
    
    <hr v-if="links.length > 0">

    <table v-if="links.length > 0" cellpadding="5" cellspacing="0" border="1">
        <tbody>
            <tr v-for="link in links" v-bind:key="link.short">
                <td>{{ link.origin }}</td>
                <td>{{ link.short }}</td>
                <td><button @click.prevent="copy(link.short)">Copy</button></td>
            </tr>
        </tbody>
    </table>

</div>

JavaScript

Vue.createApp({
    data() {
        return {
            url: '',
            links: [
                {
                    origin: 'https://stackoverflow.com/questions/44536362/how-to-handle-pastectrlv-or-with-mouse-event-in-vue-js',
                    short: 'https://example.com/235sdfge56'
                }
            ],
        }
    },
    methods: {
        shorten(event) {
            const origin = event.clipboardData.getData('text');

            this.links.push({
                origin: origin,
                short: 'https://example.com/' + this.generateUid(),
            });

            this.url = '';
        },
        copy(value) {
            const input = document.createElement('input');
            input.value = value;
            input.select();
            input.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(input.value);
            console.log(input.value);
            delete input;
            console.log(input.value);
        },
        generateUid() {
            var firstPart = (Math.random() * 46656) | 0;
            var secondPart = (Math.random() * 46656) | 0;
            firstPart = ("000" + firstPart.toString(36)).slice(-3);
            secondPart = ("000" + secondPart.toString(36)).slice(-3);
            return firstPart + secondPart;
        }
    }
}).mount('#vue')