在Vuejs 2中单击按钮时将完成更改为true答案

【问题标题】：Change completed to true on button click in Vuejs 2在Vuejs 2中单击按钮时将完成更改为true
【发布时间】：2017-03-16 19:48:47
【问题描述】：

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

请参阅此处的示例，https://jsfiddle.net/clintongreen/b5wxure9/

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>

【问题讨论】：

标签： vue.js vuejs2

【解决方案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;
    }
}

【讨论】：

谢谢，我很惊讶你可以直接在按钮上完成。再见方法
@ClintonGreen 有时很有用，就像在这种情况下，您只想切换一个布尔值。不过，您应该避免在模板中放置大块逻辑。

【解决方案2】：

你可以传递任务的索引，比如：

<li class="list-group-item clearfix" v-for="(task, taskIndex) in tasklist" >
  {{ task.description }}
  <button class="btn btn-primary btn-sm pull-right" v-if="!task.completed" @click="completeTask(taskIndex)">Complete</button>
  <button class="btn btn-default btn-sm completed text-muted pull-right disabled" v-else>Completed</button>
</li>

那么你的方法可以如下所示：

completeTask: function(index){
    return this.tasklist[index].completed = true;
}

工作示例：https://jsfiddle.net/L5kjvmc6/

【讨论】：

谢谢，很好的例子