diff --git a/public/index.html b/public/index.html
index 9a97cf3..42fe989 100644
--- a/public/index.html
+++ b/public/index.html
@@ -86,10 +86,10 @@
               <hr> 
               <input type="text" id="connect-to-peer" class="form-control" placeholder="paste-peer-id-here">
               <br>
-              <button class="btn btn-sm btn-success" onclick="connectToPeer()">
+              <button class="btn btn-sm btn-success" v-on:click="connectToPeer(document.querySelector('connect-to-peer').value)">
                 Connect
               </button>
-              <button class="btn btn-sm btn-danger" onclick="disconnectFromPeer()">
+              <button class="btn btn-sm btn-danger" v-on:click="disconnectFromPeer()">
                 Disconnect
               </button>
               <div class="messages"></div>
diff --git a/public/main.js b/public/main.js
index 9b5d98a..daa43fe 100644
--- a/public/main.js
+++ b/public/main.js
@@ -26,8 +26,7 @@ var app = new Vue({
     //   localStorage.setItem('yaswvc-peerId', peer.id);
     //   return peer;
     // },
-    connectToPeer: function() {
-      let peerId = this.peer.id;
+    connectToPeer: function(peerId) {
       this.logMessage(`Connecting to ${peerId}...`);
 
       let conn = this.peer.connect(peerId);