Tips for implementing a "load more" feature in search results using Vue.js and Laravel

I am looking to implement a load more function in my search results using Vue.js and Laravel.

Here is the approach I have taken:

<form @submit.prevent="search">
    <input v-model="term" type="search">
    <button class="btn btn-success" type="submit">Search</button>
</form>

This section displays the search results:

<tr v-for="(result, index) in results.data">
    <td>{{ result.artist_name }}</td>
    <td>{{ result.gender }}</td>
    <td>{{ result.created_at }}</td>
    <td>{{ result.updated_at }}</td>
</tr>
<div v-if="results.next_page_url" class="card-footer">
<button @click.prevent="paginatesearch(results.next_page_url)" type="button">Load More</button>
</div>

Below is how I'm handling the data variable:

data() {
return {
    term:'',
    results:[],
 }
},

This snippet shows how the search results are displayed:

search() {
        let formData = new FormData();
        formData.append('term', this.term);
        axios.post('/api/artist/search/', formData)
        .then((response) => {
        this.SearchDiv = true;
        this.IndexDiv = false;
        this.results = response.data;
        this.noResults = this.results.length === 0;
        });
    },

And here is the code for loading more data:

paginatesearch(url = '') {
this.loading = true;
this.disabled = 1;
axios.get(url ? url : '/api/artist/search/')
.then(response => {
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 => console.error(e))
},

However, when I click the button, I encounter the following error:

TypeError: Cannot convert undefined or null to object

If you need to reference the full code, it can be found at https://github.com/jazuly1/nginx/blob/master/loadmorewithsearch.vue

Answer №1

The term 'outcomes' is initially described as an array, but it is being utilized as if it were an object.

Answer №2

Just a minor correction needed.

In the search method, update the line

axios.post('/api/artist/search/', formData)
to
axios.post('/api/artist/search/' + this.$data.term)

In the paginatesearch method, change axios.get to axios.post.

There were also some adjustments made on the controller page. Now everything is functioning smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to access route after authentication - AWS Cloudfront and AWS S3 due to denial

I am facing an issue with my S3 bucket containing a Vue.js application. You can view the content in the following link: S3 bucket content In order to securely deliver this content, I have set up a Cloudfront distribution. To ensure security, I created an ...

AngularJS - Customizing the dropdown selection in Bootstrap

I am encountering an issue with setting the selected dropdown value from the server. <select **class="form-control input-sm"** placeholder="Choose Email" ng-model="groupForm.email" ng-options="agentListl.email for agentListl in agentList track by ag ...

Troubleshooting PHP and jQuery AJAX: Why is $_POST always empty?

I'm struggling to display the $_POST value in an alert box using jQuery AJAX function. However, the $_POST value from my PHP controller always turns out to be empty, resulting in an empty array in the response. My setup includes PHP version 5.5 and j ...

Is it possible to encounter an invalid character when trying to parse valid JSON using

I have an object with properties that contain JSON strings. When I serialize this object, I get the following string: [{ "template": 1, "action_json": "{\"id\":\"1\",\"action\":\"An action for all of IT!\",& ...

Having trouble rendering a model using OBJLoader in React Three Fiber

I'm having issues with rendering an .obj file in my React project using the OBJLoader and useLoader() hook from React Three Fiber. Despite ensuring that my file path is correct and wrapping the Model component in Suspense tags, I am still encountering ...

The function `canvas.toDataURL()` does not produce an image as output

When I expect the image to return mirrored, it instead shows up as a black image. <!DOCTYPE html> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <bo ...

The appearance of my website appears differently depending on the resolution

Just recently, I began exploring the world of HTML/CSS/JS and created a handy tool for my personal use. However, I encountered an issue when viewing it on different resolutions which caused some elements to look distorted. The tool I made allows me to inp ...

Shadows are not being cast by ThreeJS

I'm in the process of creating a simple Three JS application. As I familiarize myself with Three JS, I've been experimenting with different features. Currently, I am working on constructing a scene that includes a floor, an object, and a light so ...

Issue with resetting the form field

Whenever a user opens a modal window to save data, I reset the form fields to blank. This works as expected, but I encountered an issue with AngularJS form validation messages appearing due to dirty check. I tried adding $setPristine() to resolve this, but ...

Having trouble with cross-origin requests while testing locally?

While trying to break down the tutorial found at https://tympanus.net/codrops/2019/03/26/exploding-3d-objects-with-three-js/ and downloading the source code, I've encountered some issues. The explanations provided are not detailed enough. When I run t ...

Emphasizing specific lines using an array

There is a block of text containing multiple lines, each wrapped within a span with an incremented value at the end (like line-1, line-2, line-3, and so on) to distinguish between them. <div id="textbody"> <span id="line-1">what is love< ...

What could be causing my bootstrap dropdown button to malfunction?

Even after selecting an option from the dropdown menu and pressing the button, the value does not change. I attempted to console log it using JavaScript but encountered an error in the Chrome inspector: index.js:26 Uncaught TypeError: Cannot read prop ...

Developing Functions using MongoDB Console

When running the query db.graduates.find({student_id: '2010-01016'}).pretty(), it returns a result. Afterwards, I created a function: function findStud(name,value){ return db.graduates.find({name:value}); } However, while executing findStud("s ...

Validation error occurred while attempting to send form data to the Contact Form 7 API through Next.js

Having trouble sending data to the Contact Form 7 API and encountering an error while submitting the form: {into: "#", status: "validation_failed", message: "One or more fields have an error. Please check and try again.", post ...

Having trouble with executing functions on an express js Route?

I'm currently exploring Node and Express, and I'm encountering an issue when trying to pass a function instead of plain text on my route. It seems that the documentation only mentions using res.send() method with text. Even when attempting to use ...

Encountered an issue while attempting to integrate Nebular into my Angular application

As a newcomer to Angular, I decided to try installing Nebular using the command ng add @nebular/theme. However, I encountered an error in the process. Upon entering the command into my terminal, the following error message appeared: ? Which Nebular theme ...

Automatically populating state and city fields with zip code information

Starting out in the world of web development, I encountered a challenge with a registration form I'm constructing for our company. For guidance, I referred to this resource: http://css-tricks.com/using-ziptastic/. This project marks my initial interac ...

Vuejs/Nuxtjs watch doesn't have the capability to monitor modifications within the Array of Objects stored in Vuex

In the process of developing my application using Vuejs/Nuxtjs, I have encountered an issue with watching for changes in a Vuex Store array, specifically within a component named IdentifiersNode.vue. While I am able to successfully watch for direct change ...

Using Selenium with JavaScript and Python to simulate key presses

Is there a way to simulate key presses as if typing on a keyboard? I am looking to programmatically click on an input element and then emulate the user typing by pressing keys. I prefer not to use XPath selectors combined with sendkeys or similar methods. ...

There was an error in the syntax: JSON parsing error, an unrecognized token '<'

Having trouble with a syntax error: JSON parse error due to an unrecognized token '<'. One page is functioning properly with the same code, while another is displaying this error. I am unable to identify my mistake. Front-end code: const getd ...