Мой флажок ввода не хочет отображаться - PullRequest
0 голосов
/ 06 апреля 2019

Я пытаюсь создать список задач для своего веб-сайта, используя VueJS, и я могу установить флажки рядом с задачей, чтобы показать ее, но когда мне надоело добавлять ее другим способом, я обнаружил, что она не будет работать. Появился, но не работал при нажатии. Теперь он не хочет появляться или работать .. Я не понимаю, пожалуйста, помогите. Кроме того, нет, как бы я переместил это вправо от экрана в столбце, который занимает, возможно, четверть экрана? Я изучаю кодирование и делаю свое первое веб-приложение. Спасибо !!!!

РЕДАКТИРОВАТЬ - я избавился от всего остального кода и добавил только ту часть, которая не работает.

      <input id="check" type="checkbox" v-model="task.completed"> 
      <label for="check"></label>

не показывает флажок рядом с моими задачами, но перемещает задачи, как если бы там был флажок

РЕДАКТИРОВАТЬ 2: я получил, чтобы это показывало true или false с помощью следующего кода, но почему флажок не хочет отображаться, и если я пытаюсь установить второй 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...