Episode 05 • Vue 2 and October CMS Todo App

Create Todo

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.

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.

Download code
  • Episode 01 • Duration 13:35

    Setup

  • Episode 02 • Duration 16:02

    Creating The API

  • Episode 03 • Duration 17:37

    Listing Todos

  • Episode 04 • Duration 10:33

    Props

  • Episode 05 • Duration 24:58

    Create Todo

  • Episode 06 • Duration 7:59

    Computed Properties

  • Episode 07 • Duration 10:20

    Delete Todo

  • Episode 08 • Duration 11:13

    Complete Todo

  • Episode 09 • Duration 12:54

    Edit Todos

  • Episode 01 • Duration 13:35

    Setup

  • Episode 02 • Duration 16:02

    Creating The API

  • Episode 03 • Duration 17:37

    Listing Todos

  • Episode 04 • Duration 10:33

    Props

  • Episode 05 • Duration 24:58

    Create Todo

  • Episode 06 • Duration 7:59

    Computed Properties

  • Episode 07 • Duration 10:20

    Delete Todo

  • Episode 08 • Duration 11:13

    Complete Todo

  • Episode 09 • Duration 12:54

    Edit Todos