1

I'm trying to conditionally hide the lightning-tab,using if:true directive .The "courses" array is populated or empty using @wire adaptor.I am trying to use if:true condition to check if course array has entries. But it's not working, irrespective of the "course" array's values, its rendering . Here is markup and javascript I'm using. What am I doing wrong, is there another approach I can use?

html markup :

<lightning-tabset>
            <template if:true={courses}>
            <lightning-tab label="Edit Notes"> 
                <c-student-note-editor student-id ={studentId} ></c-student-note-editor>
            </lightning-tab>
        </template>
</lightning-tabset>

related javascript for course array :

export default class StudentDetail extends NavigationMixin(LightningElement) {
    courses =[];
    studentId;
    @wire(getClasses,{studentId : '$studentId'})
        wired_getClasses({ error, data }) {
            console.log('StudentId' + this.studentId);
            this.courses =[];
             if (data) {
                data.forEach((course) => {this.courses.push({
                    value: course.Id,
                    label: course.Course_Delivery__r.Course__r.Name});
                    console.log('Course:: '+ (JSON.stringify(this.courses)));
                });
    }
}

Here is console log on course array having values for first student, and empty on others, but in all cases,the console log of course array , empty in some case and populated in others

3
  • 1
    Not sure about the actual question you asked, but your handling of the wire results is inefficient and may cause multiple rendering requests unnecessarily. Use something like this.courses = data.map(course => { return { value: course.Id, label: course.Course_Delivery__r.Course__r.Name}; }); instead. The important point here is that the courses property value is updated just once with all the required course details.
    – Phil W
    Apr 26, 2021 at 14:45
  • 1
    We don't have enough code to provide a proper alternative, but presumably you'd want to query the students from the parent component and then render the children conditionally.
    – sfdcfox
    Apr 26, 2021 at 14:59
  • @sfdcfox thats right. I am passing student id to apex method to get list of courses. If there are no course I dont want to show the <lightning-tab label="Edit Notes">. I have updated the question and code snippet.
    – borkya
    Apr 26, 2021 at 17:33

2 Answers 2

5

If you initialize courses with an array, it is a truthy value, either change the assignment to null/undefined or simply change the directive to if:true={courses.length}

Also, @track is required when the property is supposed to hold an Array/Object. Decorate courses with track and this should be fine.

1
  • 1
    Thanks @Prashant Kashyap ,that fixed it. I learnt that initialized array is truthy which was causing this issue.This is not working with adding track.
    – borkya
    Apr 27, 2021 at 2:40
0

Since you have initialized the courses to empty array, it is always passing the if:true condition. remove the courses = [] from line # 2. It will work

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .