knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Laravel 5.8 + Vue.jsで、todo機能、markdown表示対応

index:

概要:

前の Laravel 5.8 関係で、
Laravel版の、一部 Vue.jsで実装した形になります。

環境

php7.3
Laravel 5.8
mysql
Vue.js

参考のコード

github.com

実装など

API
https://github.com/kuc-arc-f/lara58b_vue2_todo/blob/master/app/Http/Controllers/ApiTodosController.php

    public function index()
    {   
        $todos = Todo::orderBy('id', 'desc')->get();
        return response()->json($todos);
    }

Blade

未完了、完了の切替 表示など
https://github.com/kuc-arc-f/lara58b_vue2_todo/blob/master/resources/views/todos/index.blade.php

    new Vue({
        el: '#app',
        created () {
            this.getTasks(0);
        },    
        data: {
            todos : [],
            items : [],
        },
        methods: {
            getTasks (complete) {
                this.items = []
                axios.get('/api/apitodos')
                .then(res =>  {
                    this.items = res.data
//console.log(res.data )
                    this.convert_todos(this.items, complete)
                })            
            },
            convert_todos(items, complete){
                var ret = []
                items.forEach(function(item){
                    if(item.complete == complete){
                        ret.push(item)
                    }
                });
                this.todos = ret
//console.log(ret);
            },
            change_items(complete){
                this.convert_todos( this.items, complete)
            },
            delete_todo(id){
console.log(id);
                $("#delete_id").val(id);
                document.form_delete.submit();

            },

        }
    });

画面

f:id:knaka0209:20191218114016p:plain

参考のページ

knaka0209.hatenablog.com

Update

・Update 2020/03/20
上記の、デモページを追加しました