我正在尝试使用VueJS为我的网站构建任务列表,我可以显示任务旁边的复选框,但是当我厌倦以另一种方式添加它时,我发现它不能正常工作。显示,但单击后不起作用。现在它不想要显示或工作。.我不明白,请帮助。也不是很快,我该如何将其移动到可能占据屏幕四分之一的列中的屏幕右侧?我正在学习编码并制作第一个Web应用程序。谢谢!!!
编辑-我摆脱了所有其他代码,只添加了那部分无效的代码。
<input id="check" type="checkbox" v-model="task.completed">
<label for="check"></label>
没有在我的任务旁边显示复选框,但确实将任务移动了,好像那里有一个盒子
EDIT2:我得到了以下代码显示对还是错,但是为什么不希望出现一个复选框,并且如果我尝试点击第二个true(复选框),它只会选择第一个... idk我在做什么错
<input type="checkbox" id="check" v-model="task.completed">
<label for="check">{{ task.completed }}</label>
//
<template>
<div>
<input type="text" class="task-input" placeholder="Add Task" v-
model="newTask" @keyup.enter="addTask">
<transition-group name="fade" enter-active-class="animated fadeInUp"
leave-active-class="animated fadeOutDown">
<div v-for="(task, index) in tasksFiltered" :key="task.id" class="task-
item">
<div class="task-item-left">
<input id="check" type="checkbox" v-model="task.completed">
<label for="check"></label>
<div v-if="!task.editing" @dblclick="editTask(task)" class="task-item-
label"
:class="{ completed : task.completed }">{{ task.title }}</div>
<input v-else class="task-item-edit" type="text" v-
model="task.title"
@blur="doneEdit(task)"
@keyup.enter="doneEdit(task)" @keyup.esc="cancelEdit(task)" v-focus>
</div>
<div class="remove-item" @click="removeTask(index)">
×
</div>
</div>
</transition-group>
<div class="extra-container">
<div><label><input type="checkbox" :checked="!anyRemaining"
@change="checkAllTasks"> Check All</label></div>
<div>{{ remaining }} items left</div>
</div>
<div class="extra-container">
<div>
<button :class="{ active: filter == 'all' }" @click="filter =
'all'">All</button>
<button :class="{ active: filter == 'active' }" @click="filter =
'active'">Active</button>
<button :class="{ active: filter == 'completed' }" @click="filter =
'completed'">Completed</button>
</div>
<div>
<transition name="fade">
<button v-if="showClearCompletedButton"
@click="clearCompleted">Clear
Completed</button>
</transition>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'task-list',
data() {
return {
newTask: '',
idForTask: 3,
beforeEditCache: '',
filter: 'all',
tasks: [{
'id': 1,
'title': 'Finish photos from France',
'completed': false,
'editing': false,
},
{
'id': 2,
'title': 'Edit wedding photos',
'completed': false,
'editing': false,
},
]
}
},
computed: {
remaining() {
return this.tasks.filter(task => !task.completed).length
},
anyRemaining() {
return this.remaining != 0
},
tasksFiltered() {
if (this.filter == 'all') {
return this.tasks
} else if (this.filter == 'active') {
return this.tasks.filter(task => !task.completed)
} else if (this.filter == 'completed') {
return this.tasks.filter(task => task.completed)
}
return this.tasks
},
showClearCompletedButton() {
return this.tasks.filter(task => task.completed).length > 0
}
},
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
},
methods: {
addTask() {
if (this.newTask.trim().length == 0) {
return
}
this.tasks.push({
id: this.idForTask,
title: this.newTask,
completed: false,
editing: false,
})
this.newTask = ''
this.idForTask++
},
editTask(task) {
this.beforeEditCache = task.title
task.editing = true
},
doneEdit(task) {
if (task.title.trim() == '') {
task.title = this.beforeEditCache
}
task.editing = false
},
cancelEdit(task) {
task.title = this.beforeEditCache
task.editing = false
},
removeTask(index) {
this.tasks.splice(index, 1)
},
checkAllTasks() {
this.tasks.forEach((task) => task.completed = event.target.checked)
},
clearCompleted() {
this.tasks = this.tasks.filter(task => !task.completed)
},
}
}
</script>