title: How to create load more in search result with vue js and laravel
body: <p>I want to create function load more in my search result with vue js and laravel.</p>
  
  <p>This is what I try.
  My form code to search</p>
  
  <pre><code>&lt;form @submit.prevent="search"&gt;
      &lt;input v-model="term" type="search"&gt;
      &lt;button class="btn btn-success" type="submit"&gt;Search&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>here is to show search result</p>
  
  <pre><code>&lt;tr v-for="(result, index) in results.data"&gt;
      &lt;td&gt;{{ result.artist_name }}&lt;/td&gt;
      &lt;td&gt;{{ result.gender }}&lt;/td&gt;
      &lt;td&gt;{{ result.created_at }}&lt;/td&gt;
      &lt;td&gt;{{ result.updated_at }}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;div v-if="results.next_page_url" class="card-footer"&gt;
  &lt;button @click.prevent="paginatesearch(results.next_page_url)" type="button"&gt;Load More&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my data variable</p>
  
  <pre><code>data() {
  return {
      term:'',
      results:[],
   }
  },
  </code></pre>
  
  <p>Here is my code to showing search result.</p>
  
  <pre><code>search() {
          let formData = new FormData();
          formData.append('term', this.term);
          axios.post('/api/artist/search/', formData)
          .then((response) =&gt; {
          this.SearchDiv = true;
          this.IndexDiv = false;
          this.results = response.data;
          this.noResults = this.results.length === 0;
          });
      },
  </code></pre>
  
  <p>and this is my code to show load more data</p>
  
  <pre><code>paginatesearch(url = '') {
  this.loading = true;
  this.disabled = 1;
  axios.get(url ? url : '/api/artist/search/')
  .then(response =&gt; {
  this.loading = false;
  this.disabled = 0;
  if (! this.results.data) {
      this.results = response.data
  }
  else {
      this.results.data.push(...response.data.data)
      this.results.next_page_url = response.data.next_page_url
  }
  })
  .catch(e =&gt; console.error(e))
  },
  </code></pre>
  
  <p>But when I click the button, it give me</p>
  
  <blockquote>
    <p>TypeError: Cannot convert undefined or null to object</p>
  </blockquote>
  
  <p>Here is my full code if u need it <a href="https://github.com/jazuly1/nginx/blob/master/loadmorewithsearch.vue" rel="nofollow noreferrer">https://github.com/jazuly1/nginx/blob/master/loadmorewithsearch.vue</a></p>