First we are going to be creating new component for creating our todos. This component is going to do two things - first it's going to add our new todo to the Vue.js list of todos, and display it on the page visually.

Of course if you refresh the page that new todo will disappear, because we need to save that todo item into our October CMS database. That is going to be the second thing that our component is going to be doing.

Also we are going to learn about `v-show`, `v-model` and `$emit` method. And I'm going to show you how to use axios to post data to your api endpoint.

In this episode you are going to learn how to create new todo item using Vue.js 2.0 and then save it to our OctoberCMS database.

Create Todo

To display just a single movie when we click on a title of that movie we have to first setup our Drupal 8 View. We have to set it up so that it will take a node ID from the URL and then show us the movie with that node ID.

After that has been setup we are going to use that URL to get the data to our Vue.js application.

And there are some steps that we would have to do in between - hide our movie list, and display the actual movie that we clicked on.

As you will see this is sooo easy with Vue.js.

In this tutorial we are going setup our Drupal 8 API so that it will send only one movie to our Vue.js app. And then we are going to display that movie.

Tutorials tagged with: v-show

Get in touch