use slots instead of prop

proj/y2t/assets/js/main.js

@@ -1,4 +1,4 @@
-Vue.component('Copybox',{
+Vue.component('copybox',{
     template : `
       <div class="y2t-output">
         <button v-on:click="copyToClipboard">Copy</button>
@@ -19,6 +19,31 @@ Vue.component('Copybox',{
     }
 })
 
+Vue.component('copbox',{
+    template : `
+      <div class="y2t-output">
+        
+        <button v-on:click="copyToClipboard">Copy</button>
+        
+        <div ref="textToCopy">
+            <slot></slot>
+        </div>
+      
+      </div>
+    `,
+    methods : {
+      copyToClipboard() {
+        const textToCopy = this.$refs.textToCopy;
+        const range = document.createRange();
+        range.selectNode(textToCopy);
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(range);
+        document.execCommand('copy');
+        window.getSelection().removeAllRanges();        
+      },
+    }
+})
+
 let vm = new Vue({
 
 }).$mount('#root')

proj/y2t/handler.php

@@ -27,8 +27,11 @@
     //$checkvar = "sldkfj sldkjf lkjsdf lkj sdlfkj lskdjf lkjf lskdjf lkjflkjsd flkj flksjd flksjd flkjf lskdjf lksjdf lkjsdflk sdlfkj lsdkfj lkjsdflkjdf lkjsdfl kfjf";
     //$text = htmlspecialchars($item, ENT_QUOTES, 'UTF-8');
     //echo $text;
-    echo "<Copybox v-bind:txt='\"".$item."\"'></Copybox>";
+    //echo "<copybox v-bind:txt=' \" " . $item . " \" '></copybox>";
     //echo '</div>';
+    echo "<copbox>";
+    echo $item;
+    echo "</copbox>";
   }
 ?>