title: Store AJAX Search results with Vue and Laravel
body: <p>My goal is to have two input fields where I can type the three-letter code of an airport and AJAX would run a query to check if this airport exists in the database. If it does, it will return the name of this airport under the input field.</p>
  <p>I managed to get the first input to work, however, I have a second input where I want to search for a second airport but whenever I write an airport code in this second field the result of the first search gets overwritten.</p>
  <p>Below is the Vue component that contains the two input fields. Do you know what is the right way to get two results using the same <code>airportSearch()</code> method?</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;pairing-search&quot;&gt;
          &lt;div class=&quot;airport-input&quot;&gt;
              &lt;input type=&quot;text&quot; v-model=&quot;From&quot; @keyup=&quot;airportSearch&quot;&gt;
              &lt;ul v-if=&quot;Airports.length &gt; 0&quot;&gt;
                  &lt;li v-for=&quot;airport in Airports&quot; :key=&quot;airport.id&quot;&gt;{{ airport.name }}&amp;nbsp;({{ airport.gps_code }})&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;airport-input&quot;&gt;
              &lt;input type=&quot;text&quot; v-model=&quot;To&quot; @keyup=&quot;airportSearch&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: &quot;PairingSearch&quot;,
          data() {
              return {
                  From: null,
                  To: null,
                  Airports: []
              };
          },
          methods: {
              airportSearch() {
                  axios.get('/searchairport', {
                      params: { keyword: this.From }
                  })
                  .then(res =&gt; this.Airports = res.data)
                  .catch(error =&gt; {});
              },
          }
      }
  &lt;/script&gt;
  </code></pre>