Question

我正在尝试使用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)">
        &times;
       </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>

我的输入复选框不想显示

0 个答案: