mhdmada
187
1
Vue

How Copy Url Laravel Route in Model Vue js

Posted 2 months ago by mhdmada

I want to copy My Current url with button in model vue js

<div id="app" v-cloak>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-control wizard-form-control d-flex align-items-center testing-code px-20px mb-10px">
                    <span class="title">Testing Code:</span>
                    <span class="code text-red">{{ laravelroute}}</span>
                    <span class="btn btn-info text-white copy-btn ml-auto" @click.stop.prevent="copyTestingCode">
              Copy
            </span>
                    <input type="text" id="testing-code" :value="laravelroute">
                </div>
            </div>
        </div>
    </div>
</div>

this is vue js code for copy with button

new Vue({
    el: "#app",
    data: {
        laravelroute: "this is my url",
    },
    methods: {
        copyTestingCode () {
          let testingCodeToCopy = document.querySelector('#testing-code')
          testingCodeToCopy.setAttribute('type', 'text')    // hidden 
          testingCodeToCopy.select()

          try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            alert('Testing code was copied ' + msg);
          } catch (err) {
            alert('Oops, unable to copy');
          }

          /* unselect the range */
          testingCodeToCopy.setAttribute('type', 'hidden')
          window.getSelection().removeAllRanges()
        },
    },
    
});



Please sign in or create an account to participate in this conversation.