amitavroy / learning-vuejs Goto Github PK

require('./bootstrap');
const app = new Vue({
    el: '#app',
    data: {
    	todos: [],
    	newTodo: {id: null, title: '', completed: false},
	},
	computed: {
	  	todoCount() {
	    	return this.todos.length
	    }
	},
	methods: {
	  	addNewTodo(newTodo) {
	    	this.todos.push(newTodo)
	    	this.newTodo = {id: null, title: '', completed: false}
	    },
	    
	    deleteTodo(todo) {
	        var index = this.todos.indexOf(todo);
	        this.todos.splice(index, 1);
	    },

	    todoCompleted(todo) {
	    	todo.completed = !todo.completed
	    },
	}
});

        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading" >Мои задачи @{{todoCount}}</div>

                <div class="panel-body">
                    <ul class="list-group" v-if="todos.length > 0">
                        <li class="list-group-item" v-for="todo in todos" v-bind:class="{ 'completed' : todo.completed }">
                            @{{ todo.title }}
                            <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(todo)">Удалить</button>
                            <button class="btn btn-xs pull-right margin-right-10" 
                                v-bind:class="{'btn-success' : todo.completed, 'btn-danger' : !todo.completed}"
                                v-on:click="todoCompleted(todo)">@{{ todo.completed ? 'Завершено' : 'В работе' }}</button>
                        </li>
                    </ul>
                    <div v-else>Задач нету</div>
                    <form v-on:submit.prevent="addNewTodo(newTodo)">
                            <input v-model="newTodo.title" type="text" class="form-control margin-right-10" placeholder="добавь новую задачу">
                            <button class="btn btn-success">Добавить</button>
                    </form>

                </div>
            </div>
        </div>

require('./bootstrap');

Vue.component('TodoItems', require('./components/TodoItems.vue'));
Vue.component('TodoAddForm', require('./components/TodoAddForm.vue'));

const app = new Vue({
    el: '#app',
    data: {
    	todos: [],
    	newTodo: {id: null, title: '', completed: false},
	},
});

<template>
    <ul class="list-group" v-if="todos.length > 0">
        <li class="list-group-item" v-for="todo in todos" v-bind:class="{ 'completed' : todo.completed }">
            {{ todo.title }}
            <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(todo)">Удалить</button>
            <button class="btn btn-xs pull-right margin-right-10" 
                v-bind:class="{'btn-success' : todo.completed, 'btn-danger' : !todo.completed}"
                v-on:click="todoCompleted(todo)">{{ todo.completed ? 'Завершено' : 'В работе' }}</button>
        </li>
    </ul>
    <div v-else>Задач нету</div>
</template>

<script>
    export default {
        props: ['todos'],

        computed: {
            todoCount() {
                return this.todos.length
            }
        },

        methods: {
            todoCompleted(todo) {
                todo.completed = !todo.completed
            },

            deleteTodo(todo) {
                var index = this.todos.indexOf(todo);
                this.todos.splice(index, 1);
            },

        }

    }
</script>

<template>
        <form class="form-group" v-on:submit.prevent="addNewTodo(newTodo)">
            <input v-model="newTodo.title" type="text" class="form-control margin-right-10" placeholder="добавь новую задачу">
            <button class="btn btn-success">Добавить</button>
        </form>
</template>

<script>
    export default {
      props: ['newtodo'],
      
      data() {
        return {
            todo: {id: null, title: '', completed: false}
        }
      },
      
      methods: {
        addTodo() {
          this.newtodo = this.todo;
          this.todo = {id: null, title: '', completed: false};
        }
      }


    }
</script>

                <div class="panel-body">
                    <TodoItems>  </TodoItems> 
                    <TodoAddForm>  </TodoAddForm>
                </div>

[Vue warn]: Property or method "todoCount" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)app-1a9b4db40d.js%20line%20108%20%3E%20eval:2643:7

[Vue warn]: Unknown custom element: <todoitems> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in root instance)app-1a9b4db40d.js%20line%20108%20%3E%20eval:2643:7

[Vue warn]: Unknown custom element: <todoaddform> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in root instance)