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;
    }
}

Answer 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/

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

2 个答案: