在vuejs中使用if语句进行循环
在vuejs中使用if语句进行循环
提问于 2018-12-05 03:35:24
我试着做一个循环，用if语句显示按钮，在else语句中显示另一个按钮，但是主循环仍然给出3个按钮，而不是1个，但是当我删除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
Stack Overflow用户
回答已采纳
发布于 2018-12-05 09:48:49
在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)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53620221
复制相关文章
相似问题