vue.js - 在 Vuejs 2 中单击按钮时将完成更改为 true

Question

我正在尝试在 vuejs 中做一个任务应用程序。单击时我无法让按钮从不完整更改为完成。我无法定位我单击以将完成状态更改为 true 的特定按钮。

参见此处示例，https://jsfiddle.net/clintongreen/b5wxure9/

JS

new Vue({

    el: '#tasks',

    data: {
        message: 'Tasks',
        completed: null,
        tasklist: [
            { description: 'Read', completed: true },
            { description: 'Write', completed: true },
            { description: 'Edit', completed: false },
            { description: 'Publish', completed: false }
        ]
    },

    methods: {
        completeTask: function(){
            // console.log(this.tasks.description);
            return this.task.completed = true;
        }
    }

})  

HTML

<div class="container" id="tasks">

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
            {{ message }}
        </h3>
      </div>
      <ul class="list-group">
        <li class="list-group-item clearfix" v-for="task in tasklist" >
            {{ task.description }}
            <button class="btn btn-primary btn-sm pull-right" v-if="!task.completed" @click="completeTask">Complete</button>
            <button class="btn btn-default btn-sm completed text-muted pull-right disabled" v-else>Completed</button>
        </li>
      </ul>
    </div>

</div>

Answer 1

有几个你可以做到这一点。

<button class="btn btn-primary btn-sm pull-right" v-if="!task.completed" @click="task.completed = true">Complete</button>

如果您仍想使用该方法，请将任务传递给它。

<button class="btn btn-primary btn-sm pull-right" v-if="!task.completed" @click="completeTask(task)">Complete</button>

methods: {
    completeTask: function(task){
        // console.log(this.tasks.description);
        task.completed = true;
    }
}