title: Vuejs sending a GET request with a method
body: <p>I was trying to send a <code>GET</code> request using vue, but now I'm trying to extend it's functionality. I would like to bind sending the request to the form's submit button, and also pass a param from textfield in the form I've created.</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
       &lt;meta charset="UTF-8"&gt;
       &lt;link rel="stylesheet" type="text/css" href="Bookstyle.css"&gt; 
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar"&gt;
          &lt;a href="#contact"&gt;Cart&lt;/a&gt;
          &lt;a href="#about"&gt;Orders&lt;/a&gt;
          &lt;a href="#profil"&gt;Profile&lt;/a&gt;
          &lt;form id="searchbar"&gt;
              &lt;input type="text" placeholder="Search"&gt; &lt;/input&gt; // the input I want to send as paramValue
              &lt;input id="sendButton" type="submit" value="search"&gt; // the button to trigger sending the request
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
  &lt;/body&gt;
      &lt;script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="./script.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre class="lang-js prettyprint-override"><code>const app = new Vue({
      el: "#app",
      data: {
          paramValue: "test", // the parameter currently bound like this for test purposes
          bookResponse: [],
      },
          mounted() {
              axios
                  .get("http://localhost:8080/Books/getByParam/{param}", {
                      params: {
                          param: `${this.paramValue}`
                      }   
                  })
                  .then(response =&gt; (this.bookResponse = response.data))
      },
      template: `
          &lt;div id = "displayReturnedValue"&gt;
              &lt;p v-for="book in bookResponse" style="font-size:20px;"&gt;
                  Title:{{book.title}} 
                  Publisher:{{book.publisher}}
                  Price:{{book.price}} 
                  Availability:{{book.availability}}
                  Category:{{book.categoryid.category}}
                  Author:{{book.authorid.firstname}} {{book.authorid.lastname}}
              &lt;/p&gt;
          &lt;/div&gt;`
  })
  </code></pre>