Блог

Я создаю веб-приложение Vuejs, и у меня возникли проблемы с реализацией списка задач. Есть две проблемы. Во-первых, флажки не хотят отображаться, у меня отображаются только «false» или «true». Когда я нажимаю «false», он все равно выделяет первую запись. Здесь возникает проблема № 2. Независимо от того, какую задачу вы нажмете, она выделит только первую задачу в списке.

Мне просто нужно знать, где я ошибся. Я потратил часы, пытаясь понять это, и ничего. У меня это точно так, как показано в документации vuejs. Я все еще учусь и учусь в колледже, но я вообще не могу понять это.

Что я вижу, https://gyazo.com/7090cd07802d492e90d4fcab97597afd

Код для ввода

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

Полный код

 <template>
  <div class="tasklist">
    <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="box" type="checkbox" v-model="task.completed">
          <label for="box">{{ task.completed }}</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)">amp;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>
  

Код скрипта, дайте мне знать, если вам понадобится код CSS, я использовал scss для стилизации

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

  .task-input {
width: 100%;
padding: 10px 18px;
font-size: 18px;
margin-bottom: 16px;

amp;:focus {
  outline: 0;
}
   }
   .task-item {
   margin-bottom: 12px;
   display: flex;
align-items: center;
justify-content: space-between;
animation-duration: 0.3s;
   }

  .remove-item {
   cursor: pointer;
  margin-left: 14px;

  amp;:hover {
  color: black;
   }
 }

 .task-item-left {
// later
display: flex;
align-items: center;
  }

 .task-item-label {
padding: 10px;
border: 1px solid white;
margin-left: 12px;
    }

  .task-item-edit {
   font-size: 24px;
    color: #2c3e50;
     margin-left: 12px;
      width: 100%;
  padding: 10px;
   border: 1px solid #ccc; 
   font-family: 'Avenir', Helvetica, Arial, sans-serif;

   amp;:focus {
     outline: none;
   }
  }

   .completed {
    text-decoration: line-through;
   color: grey;
   }


     .extra-container {
    display: flex;
      align-items: center;
       justify-content: space-between;
      font-size: 16px;
        border-top: 1px solid lightgrey;
          padding-top: 14px;
      margin-bottom: 14px;
      }

      button {
        font-size: 14px;
     background-color: white;
      appearance: none;

       amp;:hover {
      background: lightgreen;
       }

     amp;:focus {
     outline: none;
    }
       }

     .active {
       background: lightgreen;
      }

     // Transitions
      .fade-enter-active,
    .fade-leave-active {
     transition: opacity .2s;
     }

  .fade-enter,
   .fade-leave-to {
     opacity: 0;
   }
    </style>