In this episode, we're finally hooking up our form so we can post new content to the backend! The process starts off by creating a reactive form object in Vue that will capture what you type in the textarea. We then wire that up so whenever you type, it's reflected in our form state.
Next, we set up a submit handler that will send the form data off to the backend via Axios. But before we can do that, we need an API endpoint! So, we switch over to the backend and quickly whip up a super-basic controller method to store posts—no validation or anything fancy, just grabbing the post body from the request, creating a new post, and returning the newly created post as JSON.
Once the backend is good to go, we wire our frontend to actually POST to this endpoint and, upon a successful response, prepend the new post to the UI. The newest post appears right up top—nice!
And here’s where things get interesting: by manually adding new posts to the top of the feed without updating our pagination logic, we end up breaking pagination. As you keep creating new posts, the pagination offset gets thrown off, and you get duplicates or missing items when loading more posts. The episode ends by showing this problem in action and sets up the next episode, where we'll look into cursor pagination as the solution.
So, in short: we build out the create-post flow, see why naive approach breaks pagination, and tee up the next episode to fix it!