[Vuejs]-Loop with if statement in vuejs

by

0👍

✅

There is mixing between v-if and v-for. If you want to check if the lesson is completed or not, you can create a separate method:

<span class="col-11 text-left">
  <button
    v-if="isCompleted(orderedLesson)"
    style="text-decoration: none; border: none; background-color: transparent;">
    <i class="fa fa-check-circle fa-lg"></i>
  </button>
  <button v-else style="text-decoration: none; border: none; background-color: transparent;">
    <i class="fa fa-circle-o fa-lg"></i>
  </button>
  <strong>{{ orderedLesson.title }}</strong>
</span>

isCompleted method

methods: {
  isCompleted (lesson) {
    let completedLessonIds = []
    if (this.userCompletedLessons) {
      completedLessonIds = this.userCompletedLessons.map(l => l.id) // you can move it to computed properties
    }
    return completedLessonIds.includes(lesson.id)
  }
}

Leave a comment