Improve exercise display and logging in VocabLessonView
- Updated the exercise tab button to show the count of available grammar exercises, enhancing user feedback. - Enhanced conditional rendering to ensure proper handling of lesson and exercise data, preventing potential errors. - Added detailed logging for exercise count and active tab state, aiding in debugging and monitoring.
This commit is contained in:
@@ -22,9 +22,9 @@
|
|||||||
:class="{ active: activeTab === 'exercises' }"
|
:class="{ active: activeTab === 'exercises' }"
|
||||||
@click="activeTab = 'exercises'"
|
@click="activeTab = 'exercises'"
|
||||||
class="tab-button"
|
class="tab-button"
|
||||||
:disabled="!hasExercises"
|
|
||||||
>
|
>
|
||||||
{{ $t('socialnetwork.vocab.courses.exercises') }}
|
{{ $t('socialnetwork.vocab.courses.exercises') }}
|
||||||
|
<span v-if="hasExercises" class="exercise-count">({{ lesson?.grammarExercises?.length || 0 }})</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -65,7 +65,7 @@
|
|||||||
|
|
||||||
<!-- Übungen-Tab -->
|
<!-- Übungen-Tab -->
|
||||||
<div v-if="activeTab === 'exercises'" class="grammar-exercises">
|
<div v-if="activeTab === 'exercises'" class="grammar-exercises">
|
||||||
<div v-if="lesson.grammarExercises && lesson.grammarExercises.length > 0">
|
<div v-if="lesson && lesson.grammarExercises && lesson.grammarExercises.length > 0">
|
||||||
<h3>{{ $t('socialnetwork.vocab.courses.grammarExercises') }}</h3>
|
<h3>{{ $t('socialnetwork.vocab.courses.grammarExercises') }}</h3>
|
||||||
<div v-for="exercise in lesson.grammarExercises" :key="exercise.id" class="exercise-item">
|
<div v-for="exercise in lesson.grammarExercises" :key="exercise.id" class="exercise-item">
|
||||||
<h4>{{ exercise.title }}</h4>
|
<h4>{{ exercise.title }}</h4>
|
||||||
@@ -157,7 +157,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else-if="lesson && (!lesson.grammarExercises || lesson.grammarExercises.length === 0)">
|
||||||
<p>{{ $t('socialnetwork.vocab.courses.noExercises') }}</p>
|
<p>{{ $t('socialnetwork.vocab.courses.noExercises') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -267,6 +267,9 @@ export default {
|
|||||||
this.lesson = res.data;
|
this.lesson = res.data;
|
||||||
console.log('[VocabLessonView] Geladene Lektion:', this.lesson);
|
console.log('[VocabLessonView] Geladene Lektion:', this.lesson);
|
||||||
console.log('[VocabLessonView] Übungen:', this.lesson?.grammarExercises);
|
console.log('[VocabLessonView] Übungen:', this.lesson?.grammarExercises);
|
||||||
|
console.log('[VocabLessonView] Anzahl Übungen:', this.lesson?.grammarExercises?.length || 0);
|
||||||
|
console.log('[VocabLessonView] activeTab:', this.activeTab);
|
||||||
|
console.log('[VocabLessonView] hasExercises:', this.hasExercises);
|
||||||
// Initialisiere Übungen aus der Lektion oder lade sie separat
|
// Initialisiere Übungen aus der Lektion oder lade sie separat
|
||||||
if (this.lesson && this.lesson.id) {
|
if (this.lesson && this.lesson.id) {
|
||||||
if (this.lesson.grammarExercises && this.lesson.grammarExercises.length > 0) {
|
if (this.lesson.grammarExercises && this.lesson.grammarExercises.length > 0) {
|
||||||
|
|||||||
Reference in New Issue
Block a user