We are still going to do a bit of clean up, since Directus development is moving at a break neck pace, but mostly because I’m publishing these videos very slowly, because of some personal issues that have been going on this whole year, but are kind of winding down for a bit at the moment. So I’m hoping I will be able to pick up the pace with the publishing and recording of these videos. 

And I promise that after this video we are going to start creating interesting things, and not just install and update stuff.

So Directus is already at the version 9.4.1 at the time of this recording and in this episode we are going to update it, AGAIN, fix some updating errors and also we are going to install GraphQL play ground which will make creating our queries much easier.

In this episode we are going to do a bit more cleanup (sorry), before building our app.

Fix No Access Issue, Update Database, Install GraphQL Playground

There was a bug in the previous episode of this series that I noticed once I was editing that video, so I'm going to show you that bug. That bug was fixed in the Directus version 9.0 which we are going to install in this video, but there appears to be a new bug in this version. I'm going to show you how to fix that bug in this video.

In this episode we are quickly going to update Directus, and also fix a bug that I noticed.

Update Directus And Fix A Bug

Now that we have done [filtering](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-41-ajax-frontend-filters) and [sorting](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-42-ajax-frontend-sorting) with Octobers Ajax framework, we will add one more feature that will make our UI more approachable. This feature is pagination, because we are showing a lot of items and we don't want to show them all at once.

To do this we are going to use Ajax framework and it's `form update` option to refresh our pages list once the query has changed. As you will see this will be pretty simple once you know how to do it.

In this episode we are going to extend our Ajax filtering system with one more feature, and that is going to be Ajax Pagination, using the October CMS Ajax framework.

Ajax Pagination

In the last few episodes we were actually creating a CRUD (Create Read Update Delete) system for our Vue.js single-page application. We already got CRD letters covered in our application. So we can [view movies](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-06-displaying-single-data-item/), [create new movies](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-10-creating-movie-with-vue-js/) and [delete movies](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-11-delete-movie-with-vue-js/). Now all that is left to do is create a way for us to update a movie. And we are going to do just that in this episode.

To create a movie you have to use all the knowledge from all the other parts of CRUD. We first have to get our movie and display the data from it in our form. Then we have to change that data and update it. As you will see the process of updating is very similar to creating. You just have to use a different request.

### Code used in this video

[Download it here](https://github.com/ivandoric/one-page-app-with-drupal-and-vue/releases/tag/12)

In this tutorial we are going to finish our CRUD system with Drupal 8 and Vue.js. The last thing we need to do is make an update system.

Tutorials tagged with: update

Get in touch