I'm working through the LWC superbadge. I have passed the first 5 challenges, and in order to get to the six, I'm looking at the page. I haven't yet started the sixth challenge, but am just trying to get the boat tiles to display.
I have all the wiring/events etc set up, and am getting the boat data based on the user's selection of the boat type, but when trying to display the individual boat tiles, I get the following error:
Uncaught (in promise) TypeError: Cannot set property 'nodeValue' of undefined search
I log the boats to the console, so I know they are there. It seems like the issue comes from instantiating the boatTile, because I output the boatName before the line with the component for the boatTile.
Relevant lines from boatSearchResults.js:
@wire(getBoats, {boatTypeId: '$boatTypeId'})
wiredBoats(results, error){
if(results){
this.boats = results.data;
this.displayBoats = true;
this.error = undefined;
console.log('the boats: ', JSON.stringify(this.boats));
}
else if(error){
this.boats = undefined;
this.displayBoats = false;
this.error = error;
}
else{
console.log('no data, no error!!');
}
}
Relevant lines from boatSearchResults.html:
<div class="slds-scrollable_y">
<lightning-layout horizontal-align="center" multiple-rows>
<template for:each={boats} for:item="boat">{boat.Name}
<lightning-layout-item key={boat.Id} padding="around-small" size="small" small-device-size="6" medium-device-size="4" large-device-size="3" >
<c-boat-tile selected-boat-id={selectedBoatId} boat={boat} onboatselect={updateSelectedTile}></c-boat-tile>
</lightning-layout-item>
</template>
</lightning-layout>
</div>
Note that I put in the boat name inside the iteration, and the first one always shows.
Output from conosle.log after setting boats:
the boats: [{"Name":"Friend of the friends","Description__c":"It was a shot in the dark, but we love it now!","Geolocation__Latitude__s":36.083559,"Geolocation__Longitude__s":-114.76663,"Picture__c":"/resource/Houseboats/fishingboat1.png","Contact__c":"0034K000001lGllQAE","BoatType__c":"a014K000001PaJWQA0","Length__c":24,"Price__c":126000,"Id":"a024K0000016nAPQAY","Contact__r":{"Name":"Aaron Gray","Id":"0034K000001lGllQAE"},"BoatType__r":{"Name":"Fishing Boat","Id":"a014K000001PaJWQA0"}},{"Name":"Home Suite Home","Description__c":"We had a band playing in this boat, we rocked the boat, this was a timeless experience.","Geolocation__Latitude__s":20.217061,"Geolocation__Longitude__s":-103.027593,"Picture__c":"/resource/Houseboats/fishingboat2.jpg","Contact__c":"0034K000001lGlmQAE","BoatType__c":"a014K000001PaJWQA0","Length__c":22,"Price__c":173000,"Id":"a024K0000016nARQAY","Contact__r":{"Name":"Emanuel Manzanares","Id":"0034K000001lGlmQAE"},"BoatType__r":{"Name":"Fishing Boat","Id":"a014K000001PaJWQA0"}},{"Name":"Saxony","Description__c":"I spent uncounted hours sitting at the bow looking at the water and the sky, and it helped me getting calmer for the days to come. Such a peace of mind. This boat is very reliable.","Geolocation__Latitude__s":51.609471,"Geolocation__Longitude__s":12.380581,"Picture__c":"/resource/Houseboats/fishingboat1.png","Contact__c":"0034K000001lGluQAE","BoatType__c":"a014K000001PaJWQA0","Length__c":16,"Price__c":173000,"Id":"a024K0000016nAfQAI","Contact__r":{"Name":"James August","Id":"0034K000001lGluQAE"},"BoatType__r":{"Name":"Fishing Boat","Id":"a014K000001PaJWQA0"}},{"Name":"Casablanca","Description__c":"This boat is big enough for two. Just me and you. It was our wedding anniversary and my...
etc.
Declaration for the boat & selectedBoatIds in boatTile.js:
@api
boat;
boatId;
@api
selectedBoatId;
I don't receive any errors on the page, just in the console.
The full error stack:
aura_proddebug.js:11602 Uncaught (in promise) TypeError: Cannot set property 'nodeValue' of undefined
at Object.setText (aura_proddebug.js:11602)
at Object.updateNodeHook [as update] (aura_proddebug.js:8964)
at patchVnode (aura_proddebug.js:5937)
at updateDynamicChildren (aura_proddebug.js:5823)
at aura_proddebug.js:9072
at runWithBoundaryProtection (aura_proddebug.js:11096)
at updateChildrenHook (aura_proddebug.js:9071)
at Object.update (aura_proddebug.js:9283)
at patchVnode (aura_proddebug.js:5937)
at updateStaticChildren (aura_proddebug.js:5917)
Any help would be appreciated!
