цикл с оператором if в vuejs - PullRequest
Новая
       9

цикл с оператором if в vuejs

0 голосов
/ 04 декабря 2018

Я пытаюсь сделать цикл, чтобы показать кнопку с оператором if и другую кнопку, когда else, но основной цикл продолжает давать 3 кнопки вместо одной, но когда я удаляю оператор else, код работает нормально, так что где пропустить 

<ul class="list-group">
  <li class="list-group-item"
      v-for="orderedLesson in orderedLessonsInSeries"
      :class=" orderedLesson.id == lesson.id ? 'active' : '' ">
    <span class="col-11 text-left">
      <button v-for="userCompletedLesson in userCompletedLessons"
        v-if="userCompletedLesson.id == orderedLesson.id"
        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>
  </li>
</ul>

1 Ответ

0 голосов
/ 05 декабря 2018

Существует смешивание между v-if и v-for.Если вы хотите проверить, закончен ли урок или нет, вы можете создать отдельный метод: 

<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 метод 

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)
  }
}
...