关于你那个vuejs的问题

gif

添加一个还可以，但是多添加之后completed就没用了，代码什么的都检查过了，没问题啊。

JellyBool
8年前

额。。你把你的代码贴出来看看？

0 分享
chenxin
8年前 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue2.0</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .completed {
            color: #1b6d85;
            text-decoration: line-through;
        }
    </style>
</head>
<body >
<nav class="nav navbar-default navbar-static-top">
    <div class="container">
        <div class="row"  id="app">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Welcome Vue2.0</div>
                    <div class="panel-body">
                        <h1>My todos { todocount }</h1>
                        <todo-item :todos="todos"></todo-item>
                        <todo-form :todos="todos"></todo-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
</body>
<script src="//cdn.bootcss.com/vue/2.0.0/vue.js"></script>
<script type="text/x-template" id="todo-template">
    <ul class="list-group">
        <li v-bind:class="{'completed':todo.completed}" v-for="(todo,index) in todos"
            class="list-group-item">{ todo.title}
            <button class="btn btn-warning btn-xs pull-right"
                    v-on:click="deletetodo(index)">Delete
            </button>
            <button class="btn btn-xs pull-right"
                    v-bind:class="[todo.completed?'btn-danger':'btn-success']"
                    v-on:click="completetodo(todo)">{ todo.completed?'undo':'completed' }
            </button>
        </li>
    </ul>
</script>
<script type="text/x-template" id="todo-form-template">
    <form v-on:submit.prevent="addtodo(newTodo)">
        <div class="form-group">
            <input v-model="newTodo.title" type="text" class="form-control" placeholder="add a new todo">
        </div>
        <div class="form-group">
            <button class="btn btn-success" type="submit">Add Todo</button>
        </div>
    </form>
</script>
<script>
    Vue.component('todo-item', {
        template: '#todo-template',
        props: ['todos'],
        methods: {
            deletetodo: function (index) {
                this.todos.splice(index, 1);
            },
            completetodo: function (todo) {
                todo.completed = !todo.completed;
            }
        }
    })
    Vue.component('todo-form', {
        template: '#todo-form-template',
        props: ['todos'],
        data(){
            return {
                newTodo: {
                    id: null,
                    title: '',
                    completed: false
                },
            }
        },
        methods: {
            addtodo: function (newtodo) {
                newtodo.completed=false,
                this.todos.push(newtodo);
                this.newTodo = {id: null, title: ''};
            },
        }
    })
    new Vue({
        el: "#app",
        data: {
            todos: [{
                id: 1,
                title: 'Vue2.0',
                completed: false
            }],
            newTodo: {
                id: null,
                title: '',
                completed: false
            },
        },
        computed: {
            todocount: function () {
                return this.todos.length;
            }
        },
    });
</script>
</html>
0 分享
JellyBool
8年前 
        methods: {
            addtodo: function (newtodo) {
                newtodo.completed=false,
                this.todos.push(newtodo);
                this.newTodo = {id: null, title: ''};
            },
        }

这个问题的吧，你修改一下这个，参照一下视频那样：

   addtodo: function (newTodo) {
                this.todos.push(newTodo);
                this.newTodo = {id: null, title: '',completed:false};
            },
0 分享
chenxin 回复 JellyBool
8年前

嗯嗯，可以了！感谢。。。。。。自己想的不对

0 分享